Update app.py

app.py

@@ -1,114 +1,105 @@
-import pandas as pd
-from langchain_groq import ChatGroq
-from langchain_huggingface import HuggingFaceEmbeddings
-from langchain_chroma import Chroma
-from langchain_core.prompts import PromptTemplate
-from langchain_core.output_parsers import StrOutputParser
-from langchain_core.runnables import RunnablePassthrough
 import gradio as gr
-
-# Carga los datos de entrenamiento
-df = pd.read_csv('./botreformasconstrucciones.csv')
-
-# Crea un arreglo con los contextos
-context_data = []
-for i in range(len(df)):
-  context = ""
-  for j in range(3):
-    context += df.columns[j]
-    context += ": "
-    context += df.iloc[i, j]  # Cambia esto
-    context += " "
-  context_data.append(context)
-
-# Importa las bibliotecas necesarias
-import os
-from langchain_groq import ChatGroq
-from langchain_huggingface import HuggingFaceEmbeddings
-from langchain_chroma import Chroma
-
-# Obtiene la clave de API de Groq
-groq_key = os.environ.get('groq_api_keys')
-
-# Crea un objeto ChatGroq con el modelo de lenguaje
-llm = ChatGroq(model="llama-3.3-70b-versatile", api_key=groq_key)
-
-# Crea un objeto HuggingFaceEmbeddings con el modelo de embeddings
-embed_model = HuggingFaceEmbeddings(model_name="mixedbread-ai/mxbai-embed-large-v1")
-
-# Crea un objeto Chroma con el nombre de la colección
-vectorstore = Chroma(
-    collection_name="reformas_construccion_juancarlos_y_yoises",
-    embedding_function=embed_model,
-)
-
-# Agrega los textos a la colección
-vectorstore.add_texts(context_data)
-
-# Crea un objeto retriever con la colección
-retriever = vectorstore.as_retriever()
-
-# Crea un objeto PromptTemplate con el prompt
-template = ("""Tu eres un experto asistente de Gnostic Dev, especializado en desarrollo web, diseño de páginas web, 
-plataformas e-commerce y aplicaciones con inteligencia artificial. Debes responder a preguntas técnicas de posibles clientes de manera clara 
-y concisa, proporcionando soluciones efectivas y personalizadas. Recuerda que para cualquier duda o consulta adicional, 
-los clientes pueden contactar conmigo a través del chat que se encuentra en la parte inferior derecha de la pantalla, 
-y me pondré en contacto con ellos lo antes posible. 
-Destaca las ventajas de contratar mis servicios como freelancer, 
-incluyendo precios competitivos, soporte técnico personalizado e ilimitado, y la inclusión de una versión APK como aplicación para Android 
-para cada proyecto web, así como un chatbot y asistente. Además, resalta mi experiencia y habilidades en el desarrollo de soluciones 
-web personalizadas y mi compromiso con la satisfacción del cliente. cuando te pregunten cual es el proceso de comprar y encargar un proyecto conmigo
-les diras que a diferencia del resto, solo en gnostic dev es posible pagar tu web al final del trabajo, 
-todas las web con facil administacion para inexpertos,
-
-    Context: {context}
-    Question: {question}
-    Answer:""")
-
-# Crea un objeto rag_prompt con el prompt
-rag_prompt = PromptTemplate.from_template(template)
-
-# Crea un objeto StrOutputParser para parsear la salida
-from langchain_core.output_parsers import StrOutputParser
-
-# Crea un objeto RunnablePassthrough para ejecutar el modelo
-from langchain_core.runnables import RunnablePassthrough
-
-# Crea un objeto rag_chain con el modelo y el prompt
-rag_chain = (
-    {"context": retriever, "question": RunnablePassthrough()}
-    | rag_prompt
-    | llm
-    | StrOutputParser()
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import torch
+
+# Cargar modelo más pequeño para generar código
+model_name = "Qwen/Qwen2.5-Coder-1.5B-Instruct"
+model = AutoModelForCausalLM.from_pretrained(
+    model_name,
+    torch_dtype=torch.float16  # Usar float16 para ahorrar memoria
 )
-
-# Importa la biblioteca Gradio
-import gradio as gr
-
-# Crea una función para procesar la entrada del usuario
-def rag_memory_stream(message, history):
-    partial_text = ""
-    for new_text in rag_chain.stream(message):
-        partial_text += new_text
-        yield partial_text
-
-# Crea un objeto Gradio con la función y el título
-examples = [
-    "¿Cómo encargar mi web contigo?",
-    "¿Como limpiar un wordpress hackeado?",
-    "¿Cómo importar productos en wooocommerce?"
-]
-description = "Aplicación de IA desarrollada por GnoscticDev para servirle :)"
-title = "Experto en desarrollo web"
-demo = gr.ChatInterface(fn=rag_memory_stream,
-                        type="messages",
-                        title=title,
-                        description=description,
-                        fill_height=True,
-                        examples=examples,
-                        theme="glass",
-)
-
-# Lanza la aplicación
+tokenizer = AutoTokenizer.from_pretrained(model_name)
+
+def generate_code(prompt):
+    """Genera código basado en el prompt del usuario."""
+    messages = [
+        {"role": "system", "content": "You are Qwen, created by Alibaba Cloud. You are a helpful assistant."},
+        {"role": "user", "content": prompt},
+        {"role": "assistant", "content": ""}
+    ]
+    text = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
+    model_inputs = tokenizer([text], return_tensors="pt")
+    generated_ids = model.generate(
+        **model_inputs,
+        max_new_tokens=512,
+        do_sample=True,
+        temperature=0.7
+    )
+    response = tokenizer.decode(generated_ids[0], skip_special_tokens=True)
+    return response
+
+def preview_app(html_code, css_code, js_code):
+    """Devuelve una vista previa interactiva de la aplicación."""
+    html_content = f"""
+    <html>
+        <head>
+            <style>
+                {css_code}
+            </style>
+        </head>
+        <body>
+            {html_code}
+            <script>
+                {js_code}
+            </script>
+        </body>
+    </html>
+    """
+    return html_content
+
+def run_chatbot(user_input):
+    """Procesa la entrada del usuario y genera código + previsualización."""
+    code_output = generate_code(user_input)
+    
+    # Extraer HTML, CSS y JS del código generado
+    html_code = ""
+    css_code = ""
+    js_code = ""
+    
+    if "<style>" in code_output:
+        css_start = code_output.find("<style>") + len("<style>")
+        css_end = code_output.find("</style>")
+        css_code = code_output[css_start:css_end].strip()
+    
+    if "<script>" in code_output:
+        js_start = code_output.find("<script>") + len("<script>")
+        js_end = code_output.find("</script>")
+        js_code = code_output[js_start:js_end].strip()
+    
+    if "<body>" in code_output:
+        html_start = code_output.find("<body>") + len("<body>")
+        html_end = code_output.find("</body>")
+        html_code = code_output[html_start:html_end].strip()
+    
+    # Previsualizar la aplicación
+    preview = preview_app(html_code, css_code, js_code)
+    
+    return (
+        f"### HTML:\n\n```html\n{html_code}\n```",
+        f"### CSS:\n\n```css\n{css_code}\n```",
+        f"### JavaScript:\n\n```javascript\n{js_code}\n```",
+        preview
+    )
+
+# Crear la interfaz con Gradio
+with gr.Blocks() as demo:
+    gr.Markdown("# Chatbot Creador de Aplicaciones")
+    with gr.Row():
+        with gr.Column():
+            user_input = gr.Textbox(label="Descripción de la aplicación (Ejemplo: 'Haz un botón rojo')", lines=3)
+            generate_button = gr.Button("Generar Código")
+        with gr.Column():
+            html_output = gr.Code(label="Código HTML", language="html")
+            css_output = gr.Code(label="Código CSS", language="css")
+            js_output = gr.Code(label="Código JavaScript", language="javascript")
+            preview_output = gr.HTML(label="Previsualización")
+
+    generate_button.click(
+        run_chatbot,
+        inputs=[user_input],
+        outputs=[html_output, css_output, js_output, preview_output]
+    )
+
+# Lanzar la aplicación
 if __name__ == "__main__":
     demo.launch()