aldohenrique commited on
Commit
6333c01
·
verified ·
1 Parent(s): dd1004f

Update interface.py

Browse files
Files changed (1) hide show
  1. 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: 100% !important;
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
- justify-content: center;
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
- height: 10vh !important;
 
 
 
 
37
  display: flex;
38
  flex-direction: column;
39
- justify-content: center;
40
- align-items: center;
41
- flex-shrink: 0;
42
  }
43
 
44
  .chat-container {
45
- height: 50vh !important;
46
  overflow-y: auto;
47
- flex-shrink: 0;
48
  margin-bottom: 10px;
49
  }
50
 
51
  .input-container {
52
- height: 10vh !important;
 
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
- .pergunta-container {
87
- background-color: #f0f8ff !important;
88
- border-radius: 8px !important;
89
- padding: 15px !important;
 
 
 
 
90
  }
91
 
92
- .modelo-dropdown {
93
- margin-bottom: 15px !important;
 
94
  }
95
 
96
- .unequal-height.svelte-1xp0cw7 {
97
- align-items: normal !important;
 
 
98
  }
99
 
100
- div.svelte-1xp0cw7 {
101
- display: grid !important;
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 para dispositivos móveis */
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
- # Área do chat - 70% da tela
167
- with gr.Column(elem_classes="chat-container"):
168
- chatbot = gr.Chatbot(
169
- label="💬 Chat com Dr. Aldo",
170
- elem_id="chat",
171
- height="100%"
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
- # Conteúdo adicional (fora da visualização inicial)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
- window.addEventListener("load", function() {
269
- const textarea = document.querySelector("#entrada_usuario textarea");
270
- if (textarea) {
271
- setTimeout(() => textarea.focus(), 100);
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