-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.py
174 lines (147 loc) · 5.75 KB
/
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
from flask import Flask, request, render_template_string
from smolagents import CodeAgent, DuckDuckGoSearchTool, HfApiModel
from dotenv import load_dotenv
import os
from flask import redirect
# Importar la función format_content desde formatters.py
from formatters import format_content
# Cargar variables de entorno desde el archivo .env
load_dotenv()
# Configuración del agente
hf_token = os.getenv("HF_TOKEN")
agent = CodeAgent(tools=[DuckDuckGoSearchTool()], model=HfApiModel(token=hf_token))
# Crear la aplicación Flask
app = Flask(__name__)
# Variable global para almacenar el historial de la conversación
conversation_history = []
# Límite máximo de entradas en el historial
MAX_HISTORY_LENGTH = 20
# Plantilla HTML con Tailwind CSS
HTML = '''
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Interactivo</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
#chat-history {
scrollbar-width: thin;
scrollbar-color: #4a5568 #cbd5e0;
}
#chat-history::-webkit-scrollbar {
width: 8px;
}
#chat-history::-webkit-scrollbar-thumb {
background-color: #4a5568;
border-radius: 4px;
}
#chat-history::-webkit-scrollbar-track {
background-color: #cbd5e0;
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex flex-col h-screen">
<!-- Cabecera -->
<div class="bg-white shadow-md p-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-center">Chat Interactivo</h1>
<form method="POST" action="/clear-history">
<button type="submit" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">
Limpiar historial
</button>
</form>
</div>
<!-- Historial de la conversación -->
<div id="chat-history" class="flex-1 overflow-y-auto p-6 space-y-4">
{% for entry in history %}
<div class="flex {% if entry.role == 'Usuario' %}justify-end{% else %}justify-start{% endif %}">
<div class="{% if entry.role == 'Usuario' %}bg-blue-500 text-white{% else %}bg-gray-200 text-black{% endif %} rounded-lg p-3 max-w-2xl">
<strong>{{ entry.role }}:</strong>
<div class="mt-1">
{{ format_content(entry.content)|safe }}
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Formulario para enviar preguntas -->
<div class="bg-white shadow-lg p-4">
<form method="POST" class="flex space-x-2">
<input type="text" name="question" placeholder="Escribe tu pregunta aquí..."
class="flex-1 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
Enviar
</button>
</form>
</div>
</div>
<!-- Script para mantener el scroll al final del historial -->
<script>
const chatHistory = document.getElementById('chat-history');
chatHistory.scrollTop = chatHistory.scrollHeight;
</script>
<!-- Script para manejar la limpieza del historial -->
<script>
function clearHistory() {
fetch('/clear-history', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => {
if (response.ok) {
// Limpiar el historial en la interfaz
const chatHistory = document.getElementById('chat-history');
chatHistory.innerHTML = '';
} else {
console.error('Error al limpiar el historial');
}
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
</body>
</html>
'''
@app.route('/clear-history', methods=['POST'])
def clear_history():
global conversation_history
conversation_history = [] # Limpiar el historial
return redirect('/') # Redirigir a la página principal
def build_context(history):
"""
Construye el contexto de la conversación a partir del historial.
"""
context = ""
for entry in history:
context += f"{entry['role']}: {entry['content']}\n"
return context
@app.route('/', methods=['GET', 'POST'])
def index():
global conversation_history
answer = None
if request.method == 'POST':
question = request.form['question']
# Agregar la pregunta al historial
conversation_history.append({"role": "Usuario", "content": question})
# Limitar el historial a un máximo de entradas
if len(conversation_history) > MAX_HISTORY_LENGTH:
conversation_history = conversation_history[-MAX_HISTORY_LENGTH:]
# Construir el contexto de la conversación
context = build_context(conversation_history)
# Ejecutar la pregunta con el historial como contexto
full_query = f"{context}\nAgente: Responde en español. {question}"
answer = agent.run(full_query)
# Agregar la respuesta al historial
conversation_history.append({"role": "Agente", "content": answer})
# Limitar el historial nuevamente (por si acaso)
if len(conversation_history) > MAX_HISTORY_LENGTH:
conversation_history = conversation_history[-MAX_HISTORY_LENGTH:]
return render_template_string(HTML, answer=answer, history=conversation_history, format_content=format_content)
if __name__ == '__main__':
app.run(debug=True)