Spaces:
Running
Running
Update interface.py
Browse files- interface.py +84 -132
interface.py
CHANGED
@@ -8,54 +8,53 @@ from ai_logic import (
|
|
8 |
)
|
9 |
|
10 |
css_customizado = """
|
11 |
-
.gradio-container {
|
12 |
-
max-width: 1400px !important;
|
13 |
-
margin: 0 auto;
|
14 |
-
width: 99%;
|
15 |
-
height:
|
16 |
-
display: flex;
|
17 |
-
flex-direction: column;
|
18 |
overflow: hidden;
|
19 |
}
|
20 |
|
21 |
.main-content {
|
22 |
-
height: 100vh !important;
|
23 |
display: flex;
|
24 |
flex-direction: column;
|
25 |
-
|
26 |
overflow: hidden;
|
|
|
27 |
}
|
28 |
|
29 |
-
.titulo-principal {
|
30 |
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
31 |
-
color: white !important;
|
32 |
padding: 20px !important;
|
33 |
-
border-radius: 10px !important;
|
34 |
-
margin-bottom: 10px !important;
|
35 |
-
text-align: center !important;
|
36 |
-
|
|
|
|
|
|
|
|
|
37 |
display: flex;
|
38 |
flex-direction: column;
|
39 |
-
|
40 |
-
align-items: center;
|
41 |
-
flex-shrink: 0;
|
42 |
}
|
43 |
|
44 |
.chat-container {
|
45 |
-
|
46 |
overflow-y: auto;
|
47 |
-
flex-shrink: 0;
|
48 |
margin-bottom: 10px;
|
49 |
}
|
50 |
|
51 |
.input-container {
|
52 |
-
|
|
|
53 |
display: flex;
|
54 |
flex-direction: column;
|
55 |
justify-content: center;
|
56 |
-
align-items: center;
|
57 |
-
flex-shrink: 0;
|
58 |
-
padding: 10px 0;
|
59 |
}
|
60 |
|
61 |
.additional-content {
|
@@ -63,99 +62,64 @@ css_customizado = """
|
|
63 |
padding-top: 20px;
|
64 |
}
|
65 |
|
66 |
-
.gr-textbox textarea {
|
67 |
-
font-size: 14px !important;
|
68 |
-
line-height: 1.5 !important;
|
69 |
-
}
|
70 |
-
|
71 |
-
.resposta-container {
|
72 |
-
background-color: #ffffff !important;
|
73 |
-
color: #1a1a1a !important;
|
74 |
-
border: 1px solid #e0e0e0 !important;
|
75 |
-
border-radius: 20px !important;
|
76 |
-
padding: 20px !important;
|
77 |
-
margin: 10px 0 !important;
|
78 |
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
|
79 |
-
}
|
80 |
-
|
81 |
-
.resposta-container pre code {
|
82 |
-
color: #1a1a1a !important;
|
83 |
-
background-color: #f8f9fa !important;
|
84 |
}
|
85 |
|
86 |
-
.
|
87 |
-
background-color: #
|
88 |
-
|
89 |
-
|
|
|
|
|
|
|
|
|
90 |
}
|
91 |
|
92 |
-
.
|
93 |
-
|
|
|
94 |
}
|
95 |
|
96 |
-
.
|
97 |
-
|
|
|
|
|
98 |
}
|
99 |
|
100 |
-
|
101 |
-
|
102 |
}
|
103 |
|
104 |
#entrada_usuario textarea {
|
105 |
-
color: white !important;
|
106 |
-
font-size: large !important;
|
107 |
-
background-color: #1a1a1a !important;
|
108 |
min-height: 60px !important;
|
109 |
}
|
110 |
|
111 |
-
.message-content {
|
112 |
-
font-size: larger;
|
113 |
-
color: white !important;
|
114 |
-
background-color: #1a1a1a !important;
|
115 |
}
|
116 |
|
117 |
-
/* Responsivo
|
118 |
@media (max-width: 768px) {
|
119 |
.titulo-principal {
|
120 |
-
height: 12vh !important;
|
121 |
padding: 15px !important;
|
122 |
}
|
123 |
-
|
124 |
-
.chat-container {
|
125 |
-
height: 48vh !important;
|
126 |
-
}
|
127 |
-
|
128 |
-
.input-container {
|
129 |
-
height: 10vh !important;
|
130 |
-
}
|
131 |
-
|
132 |
#entrada_usuario textarea {
|
133 |
min-height: 50px !important;
|
134 |
font-size: 16px !important;
|
135 |
}
|
136 |
}
|
137 |
-
|
138 |
-
@media (max-width: 480px) {
|
139 |
-
.titulo-principal {
|
140 |
-
height: 15vh !important;
|
141 |
-
padding: 10px !important;
|
142 |
-
}
|
143 |
-
|
144 |
-
.chat-container {
|
145 |
-
height: 55vh !important;
|
146 |
-
}
|
147 |
-
|
148 |
-
.input-container {
|
149 |
-
height: 10vh !important;
|
150 |
-
}
|
151 |
-
}
|
152 |
"""
|
153 |
|
154 |
def criar_interface():
|
155 |
with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
|
156 |
-
# Contêiner principal para o conteúdo visível (100vh)
|
157 |
with gr.Column(elem_classes="main-content"):
|
158 |
-
# Cabeçalho - 10% da tela
|
159 |
gr.HTML("""
|
160 |
<div class="titulo-principal">
|
161 |
<h4>🤖 iAldo - Pergunte e aprenda</h4>
|
@@ -163,44 +127,39 @@ def criar_interface():
|
|
163 |
</div>
|
164 |
""")
|
165 |
|
166 |
-
|
167 |
-
|
168 |
-
|
169 |
-
|
170 |
-
|
171 |
-
|
172 |
-
)
|
173 |
-
|
174 |
-
# Área de entrada - 20% da tela
|
175 |
-
with gr.Column(elem_classes="input-container"):
|
176 |
-
with gr.Row():
|
177 |
-
modelo_select = gr.Dropdown(
|
178 |
-
choices=list(MODELS.keys()),
|
179 |
-
value=DEFAULT_MODEL,
|
180 |
-
label="🧠 Selecione o Modelo de IA",
|
181 |
-
info="Escolha o modelo para responder",
|
182 |
-
elem_classes="modelo-dropdown"
|
183 |
)
|
184 |
-
|
185 |
-
with gr.Row():
|
186 |
-
user_input = gr.Textbox(
|
187 |
-
show_label=False,
|
188 |
-
placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
|
189 |
-
lines=2,
|
190 |
-
elem_id="entrada_usuario"
|
191 |
-
)
|
192 |
-
enviar_btn = gr.Button("Enviar", variant="primary")
|
193 |
|
194 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
195 |
with gr.Column(elem_classes="additional-content"):
|
196 |
-
# RAG
|
197 |
with gr.Accordion("⚙️ Controle do Conhecimento (RAG)", open=False):
|
198 |
status_rag = gr.Textbox(label="Status do Retreino", interactive=False)
|
199 |
botao_retreinar = gr.Button("🔄 Atualizar Conhecimento do Blog", variant="stop")
|
200 |
download_faiss_file = gr.File(label="Download do Índice FAISS", interactive=False, file_count="single", file_types=[".pkl"])
|
201 |
download_urls_file = gr.File(label="Download das URLs Processadas", interactive=False, file_count="single", file_types=[".pkl"])
|
202 |
|
203 |
-
# Exemplos
|
204 |
with gr.Accordion("📚 Exemplos de Perguntas", open=False):
|
205 |
gr.Examples(
|
206 |
examples=[
|
@@ -211,11 +170,9 @@ def criar_interface():
|
|
211 |
inputs=[user_input, modelo_select]
|
212 |
)
|
213 |
|
214 |
-
# Status API
|
215 |
with gr.Accordion("🔧 Status da API", open=False):
|
216 |
status_api = gr.Textbox(label="Status dos Modelos", interactive=False, lines=8)
|
217 |
|
218 |
-
# Informações
|
219 |
with gr.Accordion("ℹ️ Informações", open=False):
|
220 |
gr.Markdown("""
|
221 |
### Sobre o Dr. Aldo Henrique:
|
@@ -230,15 +187,11 @@ def criar_interface():
|
|
230 |
def responder(chat_history, user_msg, modelo):
|
231 |
if not user_msg.strip():
|
232 |
return chat_history, ""
|
233 |
-
|
234 |
-
# Adiciona a mensagem do usuário e uma resposta temporária
|
235 |
chat_history = chat_history + [[user_msg, "Dr. Aldo Henrique está digitando..."]]
|
236 |
yield chat_history, ""
|
237 |
-
|
238 |
-
# Gera a resposta real
|
239 |
resposta_final = responder_como_aldo(user_msg, modelo)
|
240 |
-
|
241 |
-
# Atualiza com a resposta final
|
242 |
chat_history[-1][1] = resposta_final
|
243 |
yield chat_history, ""
|
244 |
|
@@ -262,15 +215,14 @@ def criar_interface():
|
|
262 |
show_progress=True
|
263 |
)
|
264 |
|
265 |
-
# Foco automático no campo de texto ao abrir
|
266 |
gr.HTML("""
|
267 |
<script>
|
268 |
-
|
269 |
-
|
270 |
-
|
271 |
-
|
272 |
-
|
273 |
-
|
274 |
</script>
|
275 |
""")
|
276 |
|
|
|
8 |
)
|
9 |
|
10 |
css_customizado = """
|
11 |
+
.gradio-container {
|
12 |
+
max-width: 1400px !important;
|
13 |
+
margin: 0 auto;
|
14 |
+
width: 99%;
|
15 |
+
height: 100vh !important;
|
16 |
+
display: flex;
|
17 |
+
flex-direction: column;
|
18 |
overflow: hidden;
|
19 |
}
|
20 |
|
21 |
.main-content {
|
|
|
22 |
display: flex;
|
23 |
flex-direction: column;
|
24 |
+
height: 100vh;
|
25 |
overflow: hidden;
|
26 |
+
flex-shrink: 0;
|
27 |
}
|
28 |
|
29 |
+
.titulo-principal {
|
30 |
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
31 |
+
color: white !important;
|
32 |
padding: 20px !important;
|
33 |
+
border-radius: 10px !important;
|
34 |
+
margin-bottom: 10px !important;
|
35 |
+
text-align: center !important;
|
36 |
+
flex-shrink: 0;
|
37 |
+
}
|
38 |
+
|
39 |
+
.chat-area {
|
40 |
+
flex: 1;
|
41 |
display: flex;
|
42 |
flex-direction: column;
|
43 |
+
overflow: hidden;
|
|
|
|
|
44 |
}
|
45 |
|
46 |
.chat-container {
|
47 |
+
flex: 1;
|
48 |
overflow-y: auto;
|
|
|
49 |
margin-bottom: 10px;
|
50 |
}
|
51 |
|
52 |
.input-container {
|
53 |
+
flex-shrink: 0;
|
54 |
+
padding: 10px 0;
|
55 |
display: flex;
|
56 |
flex-direction: column;
|
57 |
justify-content: center;
|
|
|
|
|
|
|
58 |
}
|
59 |
|
60 |
.additional-content {
|
|
|
62 |
padding-top: 20px;
|
63 |
}
|
64 |
|
65 |
+
.gr-textbox textarea {
|
66 |
+
font-size: 14px !important;
|
67 |
+
line-height: 1.5 !important;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
68 |
}
|
69 |
|
70 |
+
.resposta-container {
|
71 |
+
background-color: #ffffff !important;
|
72 |
+
color: #1a1a1a !important;
|
73 |
+
border: 1px solid #e0e0e0 !important;
|
74 |
+
border-radius: 20px !important;
|
75 |
+
padding: 20px !important;
|
76 |
+
margin: 10px 0 !important;
|
77 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
|
78 |
}
|
79 |
|
80 |
+
.resposta-container pre code {
|
81 |
+
color: #1a1a1a !important;
|
82 |
+
background-color: #f8f9fa !important;
|
83 |
}
|
84 |
|
85 |
+
.pergunta-container {
|
86 |
+
background-color: #f0f8ff !important;
|
87 |
+
border-radius: 8px !important;
|
88 |
+
padding: 15px !important;
|
89 |
}
|
90 |
|
91 |
+
.modelo-dropdown {
|
92 |
+
margin-bottom: 15px !important;
|
93 |
}
|
94 |
|
95 |
#entrada_usuario textarea {
|
96 |
+
color: white !important;
|
97 |
+
font-size: large !important;
|
98 |
+
background-color: #1a1a1a !important;
|
99 |
min-height: 60px !important;
|
100 |
}
|
101 |
|
102 |
+
.message-content {
|
103 |
+
font-size: larger;
|
104 |
+
color: white !important;
|
105 |
+
background-color: #1a1a1a !important;
|
106 |
}
|
107 |
|
108 |
+
/* Responsivo */
|
109 |
@media (max-width: 768px) {
|
110 |
.titulo-principal {
|
|
|
111 |
padding: 15px !important;
|
112 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
113 |
#entrada_usuario textarea {
|
114 |
min-height: 50px !important;
|
115 |
font-size: 16px !important;
|
116 |
}
|
117 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
118 |
"""
|
119 |
|
120 |
def criar_interface():
|
121 |
with gr.Blocks(title="Dr. Aldo Henrique - API Externa", theme=gr.themes.Soft(), css=css_customizado) as interface:
|
|
|
122 |
with gr.Column(elem_classes="main-content"):
|
|
|
123 |
gr.HTML("""
|
124 |
<div class="titulo-principal">
|
125 |
<h4>🤖 iAldo - Pergunte e aprenda</h4>
|
|
|
127 |
</div>
|
128 |
""")
|
129 |
|
130 |
+
with gr.Column(elem_classes="chat-area"):
|
131 |
+
with gr.Column(elem_classes="chat-container"):
|
132 |
+
chatbot = gr.Chatbot(
|
133 |
+
label="💬 Chat com Dr. Aldo",
|
134 |
+
elem_id="chat",
|
135 |
+
height="100%"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
136 |
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
137 |
|
138 |
+
with gr.Column(elem_classes="input-container"):
|
139 |
+
with gr.Row():
|
140 |
+
modelo_select = gr.Dropdown(
|
141 |
+
choices=list(MODELS.keys()),
|
142 |
+
value=DEFAULT_MODEL,
|
143 |
+
label="🧠 Selecione o Modelo de IA",
|
144 |
+
info="Escolha o modelo para responder",
|
145 |
+
elem_classes="modelo-dropdown"
|
146 |
+
)
|
147 |
+
with gr.Row():
|
148 |
+
user_input = gr.Textbox(
|
149 |
+
show_label=False,
|
150 |
+
placeholder="Digite sua pergunta e pressione Enter ou clique em Enviar",
|
151 |
+
lines=2,
|
152 |
+
elem_id="entrada_usuario"
|
153 |
+
)
|
154 |
+
enviar_btn = gr.Button("Enviar", variant="primary")
|
155 |
+
|
156 |
with gr.Column(elem_classes="additional-content"):
|
|
|
157 |
with gr.Accordion("⚙️ Controle do Conhecimento (RAG)", open=False):
|
158 |
status_rag = gr.Textbox(label="Status do Retreino", interactive=False)
|
159 |
botao_retreinar = gr.Button("🔄 Atualizar Conhecimento do Blog", variant="stop")
|
160 |
download_faiss_file = gr.File(label="Download do Índice FAISS", interactive=False, file_count="single", file_types=[".pkl"])
|
161 |
download_urls_file = gr.File(label="Download das URLs Processadas", interactive=False, file_count="single", file_types=[".pkl"])
|
162 |
|
|
|
163 |
with gr.Accordion("📚 Exemplos de Perguntas", open=False):
|
164 |
gr.Examples(
|
165 |
examples=[
|
|
|
170 |
inputs=[user_input, modelo_select]
|
171 |
)
|
172 |
|
|
|
173 |
with gr.Accordion("🔧 Status da API", open=False):
|
174 |
status_api = gr.Textbox(label="Status dos Modelos", interactive=False, lines=8)
|
175 |
|
|
|
176 |
with gr.Accordion("ℹ️ Informações", open=False):
|
177 |
gr.Markdown("""
|
178 |
### Sobre o Dr. Aldo Henrique:
|
|
|
187 |
def responder(chat_history, user_msg, modelo):
|
188 |
if not user_msg.strip():
|
189 |
return chat_history, ""
|
190 |
+
|
|
|
191 |
chat_history = chat_history + [[user_msg, "Dr. Aldo Henrique está digitando..."]]
|
192 |
yield chat_history, ""
|
193 |
+
|
|
|
194 |
resposta_final = responder_como_aldo(user_msg, modelo)
|
|
|
|
|
195 |
chat_history[-1][1] = resposta_final
|
196 |
yield chat_history, ""
|
197 |
|
|
|
215 |
show_progress=True
|
216 |
)
|
217 |
|
|
|
218 |
gr.HTML("""
|
219 |
<script>
|
220 |
+
window.addEventListener("load", function() {
|
221 |
+
const textarea = document.querySelector("#entrada_usuario textarea");
|
222 |
+
if (textarea) {
|
223 |
+
setTimeout(() => textarea.focus(), 100);
|
224 |
+
}
|
225 |
+
});
|
226 |
</script>
|
227 |
""")
|
228 |
|