Spaces:

jorgencio
/

proandosi

Sleeping

App Files Files Community

jorgencio commited on Dec 7, 2024

Commit

78ca0a1

1 Parent(s): 83afe32

ver3

Browse files

Files changed (2) hide show

app.py +49 -12
templates/chat.html +25 -138

app.py CHANGED Viewed

@@ -1,11 +1,11 @@
-from fastapi import FastAPI
-from fastapi.responses import HTMLResponse
-from fastapi import FastAPI
-from fastapi.responses import HTMLResponse
 from fastapi.templating import Jinja2Templates
-from fastapi import Request
 from fastapi.staticfiles import StaticFiles
 app = FastAPI()
@@ -14,7 +14,11 @@ templates = Jinja2Templates(directory="templates")
 # Define el personaje
 personaje = "rias"
 # Monta la carpeta 'static' para servir archivos estáticos
 app.mount("/static", StaticFiles(directory="static"), name="static")
@@ -33,9 +37,42 @@ async def personaje_detalle(request: Request, personaje: str):
     }
     return templates.TemplateResponse("chat.html", {"request": request, **context})
-@app.get("/", response_class=HTMLResponse)
-def read_html():
-    with open("templates/chat.html", "r") as f:
-        html_content = f.read()
-    return html_content

+from fastapi import FastAPI, Request, Form
+from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.templating import Jinja2Templates
 from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+import torch
+from transformers import AutoModelForCausalLM, AutoTokenizer
 app = FastAPI()
 # Define el personaje
 personaje = "rias"
+user="user"
+chat={
+    personaje: f"hola soy {personaje} no esperaba verte por aqui",
+    user:f"hola "
+}
 # Monta la carpeta 'static' para servir archivos estáticos
 app.mount("/static", StaticFiles(directory="static"), name="static")
     }
     return templates.TemplateResponse("chat.html", {"request": request, **context})
+model_name = "nakodanei/Blue-Orchid-2x7b"
+# Inicialización global
+tokenizer = AutoTokenizer.from_pretrained(model_name)
+model = AutoModelForCausalLM.from_pretrained(
+    model_name,
+    device_map="auto",
+    torch_dtype=torch.float16
+)
+@app.post("/personajes/{personaje}/chat", response_class=HTMLResponse)
+async def chat_with_character(request: Request, personaje: str, user_input: str):
+    prompt = f"""
+    ### Instruction:
+    You are {personaje}, a sexy girl who has been dating the user for 2 months.
+    ### Input:
+    User: {user_input}
+    ### Response:
+    Character:
+    """
+    inputs = tokenizer(prompt, return_tensors="pt").to("cuda" if torch.cuda.is_available() else "cpu")
+    outputs = model.generate(
+        **inputs,
+        max_new_tokens=500,
+        pad_token_id=tokenizer.eos_token_id,
+        do_sample=True,
+        temperature=0.7
+    )
+    generated_response = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    return {"response": generated_response}

templates/chat.html CHANGED Viewed

@@ -1,140 +1,27 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Live Chat</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        body {
-            background: #F4F7FC;
-            font-family: 'Roboto', sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-        }
-        .chat-container {
-            width: 100%;
-            max-width: 900px;
-            height: 90vh;
-            background: #fff;
-            border-radius: 15px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            display: flex;
-            flex-direction: column;
-        }
-        .chat-header {
-            background: #04CB28;
-            border-radius: 15px 15px 0 0;
-            padding: 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            color: #fff;
-            font-weight: bold;
-        }
-        .chat-bubble {
-            border-radius: 20px;
-            padding: 12px;
-            font-size: 14px;
-            background: #E2FFE8;
-            margin-bottom: 10px;
-            word-wrap: break-word;
-        }
-        .chat-bubble.bg-white {
-            background: #F8F9FA;
-            border: 1px solid #E7E7E9;
-        }
-        .message-container {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 20px;
-        }
-        .message {
-            display: flex;
-            align-items: flex-start;
-            margin-bottom: 15px;
-        }
-        .message.right {
-            justify-content: flex-end;
-        }
-        .message.left {
-            justify-content: flex-start;
-        }
-        .message img {
-            border-radius: 50%;
-            width: 45px;
-            height: 45px;
-            margin-right: 10px;
-        }
-        .form-control {
-            width: 100%;
-            border-radius: 12px;
-            border: 1px solid #F0F0F0;
-            padding: 12px;
-            font-size: 14px;
-            margin-top: 10px;
-            resize: none;
-        }
-        .form-control:focus {
-            border-color: #04CB28;
-            box-shadow: none;
-        }
-        .form-control::placeholder {
-            font-size: 14px;
-            color: #C4C4C4;
-        }
-    </style>
-</head>
-<body>
-    <div class="chat-container">
-        <div class="chat-header">
-            <span>Live Chat - {{ character_name }}</span>
-        </div>
-        <div class="message-container">
-            <!-- Mensaje de usuario con imagen dinámica -->
-            <div class="message left">
-                <img src="/static/{{ character_image }}" alt="User Profile" id="user-img">
-                <div class="chat-bubble">
-                    <span id="user-name">Usuario</span>: ¡Hola, soy {{ character_name }} Gracias por visitar mi chat.
-                </div>
-            </div>
-            <!-- Mensaje de bot con imagen dinámica -->
-            <div class="message right">
-                <div class="chat-bubble bg-white">
-                    <span class="text-muted">¿Cómo estás?</span>
-                </div>
-                <img src="/static/Makoto_anime.webp" alt="Bot Profile" id="bot-img">
             </div>
         </div>
-        <div class="form-group px-3">
-            <textarea class="form-control" rows="3" placeholder="Escribe tu mensaje..."></textarea>
-        </div>
-    </div>
-    <script>
-        // Configurar nombre dinámico para el usuario y el bot
-        document.getElementById('user-name').textContent = "{{ character_name }}";
-        document.getElementById('bot-img').src = "/static/Makoto_anime.webp"; // Cambia la imagen del bot
-        document.getElementById('user-img').src = "/static/{{ character_image }}"; // Cambia la imagen del usuario    </script>
-    <!-- Bootstrap JS (opcional, para funcionalidades como botones y otros componentes interactivos) -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]-alpha1/dist/js/bootstrap.bundle.min.js"></script>
-</body>
-</html>

+<div class="chat-bubbles">
+    {% for message in messages %}
+        <div class="message {{ message.type }}">
+            <img src="/static/{{ message.image }}" alt="Profile">
+            <div class="chat-bubble">
+                {{ message.text }}
             </div>
         </div>
+    {% endfor %}
+</div>
+<form id="chat-form" method="POST">
+    <input type="text" id="user-input" name="user_input" placeholder="Type your message..." required>
+    <button type="submit">Send</button>
+</form>
+<script>
+    document.getElementById("chat-form").addEventListener("submit", async function(e) {
+        e.preventDefault();
+        const userInput = document.getElementById("user-input").value;
+        const response = await fetch(`/personajes/{{ character_name }}/chat`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ user_input: userInput })
+        });
+        const data = await response.json();
+        console.log(data.response);
+    });
+</script>