Spaces:

luck210
/

gemma

Running

App Files Files Community

luck210 commited on Mar 27

Commit

d1a9496

verified ·

1 Parent(s): a0e137a

Update app.py

Browse files

Files changed (1) hide show

app.py +169 -78

app.py CHANGED Viewed

@@ -1,93 +1,184 @@
-from fastapi import FastAPI, HTTPException
 from fastapi.responses import HTMLResponse
-from transformers import pipeline
-# Création de l'application FastAPI
-app = FastAPI(title="Traduction Anglais → Français")
-# Chargement du modèle de traduction
-translator = pipeline("translation_en_to_fr", model="Helsinki-NLP/opus-mt-en-fr")
-@app.get("/", response_class=HTMLResponse)
-def serve_html():
-    """ Sert l'interface utilisateur en HTML """
-    return """
-    <!DOCTYPE html>
-    <html lang="fr">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Traduction Anglais → Français</title>
-        <style>
-            body { font-family: Arial, sans-serif; text-align: center; margin: 50px; background-color: #f4f4f4; }
-            h2 { color: #333; }
-            textarea { width: 80%; height: 100px; margin: 10px; padding: 10px; font-size: 16px; }
-            button { padding: 10px 20px; font-size: 16px; background-color: #007BFF; color: white; border: none; cursor: pointer; }
-            button:hover { background-color: #0056b3; }
-            #output { margin-top: 20px; font-size: 18px; font-weight: bold; color: #28a745; }
-            .loader { display: none; margin: 10px auto; border: 5px solid #f3f3f3; border-top: 5px solid #007BFF; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
-            @keyframes spin { 100% { transform: rotate(360deg); } }
-        </style>
-    </head>
-    <body>
-        <h2>Traduction Anglais → Français</h2>
-        <textarea id="textInput" placeholder="Entrez votre texte en anglais..."></textarea><br>
-        <button onclick="translateText()">Traduire</button>
-        <div class="loader" id="loader"></div>
-        <p id="output"></p>
-        <script>
-            async function translateText() {
-                let text = document.getElementById("textInput").value;
-                let output = document.getElementById("output");
-                let loader = document.getElementById("loader");
-                if (!text.trim()) {
-                    output.innerText = "Veuillez entrer du texte !";
-                    output.style.color = "red";
-                    return;
-                }
-                loader.style.display = "block";
-                output.innerText = "";
-                try {
-                    let response = await fetch("/translate/", {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ text: text })
-                    });
-                    let data = await response.json();
-                    if (response.ok) {
-                        output.innerText = "Traduction : " + data.translated;
-                        output.style.color = "#28a745";
-                    } else {
-                        output.innerText = "Erreur : " + data.detail;
-                        output.style.color = "red";
-                    }
-                } catch (error) {
-                    output.innerText = "Erreur de connexion.";
-                    output.style.color = "red";
-                } finally {
-                    loader.style.display = "none";
-                }
             }
-        </script>
-    </body>
-    </html>
-    """
-@app.post("/translate/")
-def translate(text: str):
-    """ Traduit un texte de l'anglais vers le français """
-    if not text:
-        raise HTTPException(status_code=400, detail="Le texte est vide.")
     try:
-        translated_text = translator(text)[0]['translation_text']
-        return {"original": text, "translated": translated_text}
     except Exception as e:
-        raise HTTPException(status_code=500, detail=f"Erreur de traduction : {e}")

+ from fastapi import FastAPI, HTTPException
 from fastapi.responses import HTMLResponse
+from transformers import AutoModelForCausalLM, AutoTokenizer
+app = FastAPI(title="Chatbot")
+# Load the chatbot model (DialoGPT-medium) at startup
+model_name = "microsoft/DialoGPT-medium"
+tokenizer = AutoTokenizer.from_pretrained(model_name)
+model = AutoModelForCausalLM.from_pretrained(model_name)
+# Function to generate chatbot response
+def get_chatbot_response(user_input: str, max_length=100):
+    if not user_input:
+        return "Please say something!"
+    # Encode the input and generate a response
+    input_ids = tokenizer.encode(user_input + tokenizer.eos_token, return_tensors="pt")
+    chat_history_ids = model.generate(
+        input_ids,
+        max_length=max_length,
+        pad_token_id=tokenizer.eos_token_id,
+        no_repeat_ngram_size=3,
+        do_sample=True,
+        top_k=50,
+        top_p=0.95,
+        temperature=0.8
+    )
+    # Decode the response, skipping the input part
+    response = tokenizer.decode(chat_history_ids[:, input_ids.shape[-1]:][0], skip_special_tokens=True)
+    return response.strip()
+# HTML, CSS, and JS embedded
+HTML_CONTENT = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f2f5;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 800px;
+            width: 100%;
+            padding: 2rem;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: #2c3e50;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .chat-area {
+            max-height: 400px;
+            overflow-y: auto;
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            background: #f9f9f9;
+            border: 2px solid #eee;
+            border-radius: 5px;
+        }
+        .message {
+            margin: 0.5rem 0;
+            padding: 0.8rem;
+            border-radius: 5px;
+        }
+        .user-message {
+            background-color: #3498db;
+            color: white;
+            margin-left: 20%;
+            text-align: right;
+        }
+        .bot-message {
+            background-color: #ecf0f1;
+            color: #2c3e50;
+            margin-right: 20%;
+        }
+        .input-section {
+            display: flex;
+            gap: 1rem;
+        }
+        input[type="text"] {
+            flex: 1;
+            padding: 0.8rem;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 1rem;
+        }
+        button {
+            padding: 0.8rem 1.5rem;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Chatbot</h1>
+        <div class="chat-area" id="chatArea"></div>
+        <div class="input-section">
+            <input type="text" id="userInput" placeholder="Type your message..." onkeypress="if(event.key === 'Enter') sendMessage();">
+            <button onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+    <script>
+        const chatArea = document.getElementById("chatArea");
+        const userInput = document.getElementById("userInput");
+        function addMessage(text, isUser = false) {
+            const messageDiv = document.createElement("div");
+            messageDiv.className = "message " + (isUser ? "user-message" : "bot-message");
+            messageDiv.textContent = text;
+            chatArea.appendChild(messageDiv);
+            chatArea.scrollTop = chatArea.scrollHeight;
+        }
+        async function sendMessage() {
+            const text = userInput.value.trim();
+            if (!text) return;
+            addMessage(text, true);
+            userInput.value = "";
+            addMessage("Thinking...");
+            try {
+                const response = await fetch("/chat", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ message: text })
+                });
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.detail || "Chat error");
+                chatArea.lastChild.remove();
+                addMessage(data.response);
+            } catch (error) {
+                chatArea.lastChild.remove();
+                addMessage(`Error: ${error.message}`);
             }
+        }
+    </script>
+</body>
+</html>
+"""
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+    return HTML_CONTENT
+@app.post("/chat")
+async def chat_endpoint(data: dict):
+    message = data.get("message", "")
+    if not message:
+        raise HTTPException(status_code=400, detail="No message provided")
     try:
+        response = get_chatbot_response(message)
+        return {"response": response}
     except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Chat error: {str(e)}")
+if __name__ == "__main__":
+    import uvicorn
+    # Modified to use port 7860 for Hugging Face Spaces
+    uvicorn.run(app, host="0.0.0.0", port=7860)