Spaces:

eaglelandsonce
/

llama3LivelyHachathon

Sleeping

App Files Files Community

eaglelandsonce commited on Jul 21

Commit

8105d14

•

1 Parent(s): 52d7f2e

Update app.py

Browse files

Files changed (1) hide show

app.py +131 -99

app.py CHANGED Viewed

@@ -7,35 +7,126 @@ from threading import Thread
 # Set an environment variable
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
-DESCRIPTION = '''<div><h1 style="text-align: center;">Meta Llama3 8B with EmotiPal</h1></div>'''
-LICENSE = """<p/>---Built with Meta Llama 3"""
-PLACEHOLDER = """"""
-css = """
-h1 { text-align: center; display: block;}
-#duplicate-button { margin: auto; color: white; background: #1565c0; border-radius: 100vh;}
-"""
-# EmotiPal HTML
 EMOTIPAL_HTML = """
-<div style="font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; padding: 20px; border-radius: 10px;">
-    <h1>EmotiPal</h1>
-    <div id="pet-image" style="width: 200px; height: 200px; margin: 20px auto; border-radius: 50%; background-color: #ddd; display: flex; justify-content: center; align-items: center; font-size: 100px;">
-        🐶
     </div>
-    <h2 id="greeting">How are you feeling today?</h2>
-</div>
-"""
-# Define mood messages
-MOOD_MESSAGES = {
-    "happy": "That's wonderful! Your happiness is contagious. Why not share your joy with someone today?",
-    "sad": "I'm here for you. Remember, it's okay to feel sad sometimes. How about we do a quick gratitude exercise?",
-    "angry": "I understand you're feeling frustrated. Let's try a deep breathing exercise to help calm down.",
-    "anxious": "You're not alone in feeling anxious. How about we focus on something positive you're looking forward to?"
-}
 # Load the tokenizer and model
 tokenizer = AutoTokenizer.from_pretrained("meta-llama/Meta-Llama-3-8B-Instruct")
@@ -43,7 +134,7 @@ model = AutoModelForCausalLM.from_pretrained("meta-llama/Meta-Llama-3-8B-Instruc
 terminators = [
     tokenizer.eos_token_id,
-    tokenizer.convert_tokens_to_ids("")
 ]
 @spaces.GPU(duration=120)
@@ -72,80 +163,21 @@ def chat_llama3_8b(message: str, history: list, temperature: float, max_new_toke
         outputs.append(text)
     return "".join(outputs)
-# EmotiPal function
-def set_mood(mood, query_input):
-    pet_emoji = {"happy": "🐶", "sad": "🐾", "angry": "🐺", "anxious": "🐩"}
-    greeting = f"I see you're feeling {mood} today."
-    pet_image = pet_emoji.get(mood, "🐶")
-    support_message = MOOD_MESSAGES.get(mood, "")
-    # Generate a query for Llama 3 based on the mood
-    if query_input:
-        llama_query = f"I'm feeling {mood}. {query_input}"
-    else:
-        llama_query = f"I'm feeling {mood}. Can you give me some advice or encouragement?"
-    return greeting, pet_image, support_message, llama_query
-# Function to handle Llama 3 response
-def get_llama_response(query, history):
-    response = chat_llama3_8b(query, history, temperature=0.7, max_new_tokens=256)
     return response
-# Gradio block
-with gr.Blocks(fill_height=True, css=css) as demo:
-    gr.Markdown(DESCRIPTION)
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML(EMOTIPAL_HTML)
-            mood_buttons = gr.Radio(
-                ["happy", "sad", "angry", "anxious"],
-                label="Select your mood",
-                info="Click on your current mood",
-            )
-            query_input = gr.Textbox(label="Ask EmotiPal something (optional)")
-            greeting_output = gr.Textbox(label="EmotiPal says:")
-            pet_image_output = gr.Textbox(label="Pet")
-            support_message_output = gr.Textbox(label="Support Message")
-            llama_query_output = gr.Textbox(label="Query for Llama 3")
-            llama_response_output = gr.Textbox(label="Llama 3 Response")
-            mood_buttons.change(
-                set_mood,
-                inputs=[mood_buttons, query_input],
-                outputs=[greeting_output, pet_image_output, support_message_output, llama_query_output]
-            )
-            ask_llama_button = gr.Button("Ask Llama 3")
-            ask_llama_button.click(
-                get_llama_response,
-                inputs=[llama_query_output, gr.State([])],
-                outputs=[llama_response_output]
-            )
-        with gr.Column(scale=2):
-            chatbot = gr.Chatbot(height=450, placeholder=PLACEHOLDER, label='Gradio ChatInterface')
-            gr.ChatInterface(
-                fn=chat_llama3_8b,
-                chatbot=chatbot,
-                fill_height=True,
-                additional_inputs_accordion=gr.Accordion(label="⚙️ Parameters", open=False, render=False),
-                additional_inputs=[
-                    gr.Slider(minimum=0, maximum=1, step=0.1, value=0.95, label="Temperature", render=False),
-                    gr.Slider(minimum=128, maximum=4096, step=1, value=512, label="Max new tokens", render=False),
-                ],
-                examples=[
-                    ['How to setup a human base on Mars? Give short answer.'],
-                    ["Explain theory of relativity to me like I'm 8 years old."],
-                    ['What is 9,000 * 9,000?'],
-                    ['Write a pun-filled happy birthday message to my friend Alex.'],
-                    ['Justify why a penguin might make a good king of the jungle.']
-                ],
-                cache_examples=False,
-            )
-    gr.Markdown(LICENSE)
 if __name__ == "__main__":
     demo.launch()

 # Set an environment variable
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
+# EmotiPal HTML and JavaScript
 EMOTIPAL_HTML = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EmotiPal</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+        .container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+        #pet-image {
+            width: 200px;
+            height: 200px;
+            margin: 20px auto;
+            border-radius: 50%;
+            background-color: #ddd;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 100px;
+        }
+        button {
+            margin: 10px;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>EmotiPal</h1>
+        <div id="pet-image">🐶</div>
+        <h2 id="greeting">How are you feeling today?</h2>
+        <div>
+            <button onclick="setMood('happy')">😊 Happy</button>
+            <button onclick="setMood('sad')">😢 Sad</button>
+            <button onclick="setMood('angry')">😠 Angry</button>
+            <button onclick="setMood('anxious')">😰 Anxious</button>
+        </div>
+        <p id="support-message"></p>
+        <input type="text" id="query-input" placeholder="Ask EmotiPal something (optional)">
+        <button onclick="askLlama()">Ask Llama 3</button>
+        <p id="llama-response"></p>
     </div>
+    <script>
+        const supportMessages = {
+            happy: "That's wonderful! Your happiness is contagious. Why not share your joy with someone today?",
+            sad: "I'm here for you. Remember, it's okay to feel sad sometimes. How about we do a quick gratitude exercise?",
+            angry: "I understand you're feeling frustrated. Let's try a deep breathing exercise to help calm down.",
+            anxious: "You're not alone in feeling anxious. How about we focus on something positive you're looking forward to?"
+        };
+        let currentMood = '';
+        function setMood(mood) {
+            currentMood = mood;
+            const greeting = document.getElementById('greeting');
+            const supportMessage = document.getElementById('support-message');
+            const petImage = document.getElementById('pet-image');
+            greeting.textContent = `I see you're feeling ${mood} today.`;
+            supportMessage.textContent = supportMessages[mood];
+            switch(mood) {
+                case 'happy':
+                    petImage.textContent = '🐶';
+                    break;
+                case 'sad':
+                    petImage.textContent = '🐾';
+                    break;
+                case 'angry':
+                    petImage.textContent = '🐺';
+                    break;
+                case 'anxious':
+                    petImage.textContent = '🐩';
+                    break;
+            }
+        }
+        function askLlama() {
+            const queryInput = document.getElementById('query-input').value;
+            const llamaQuery = currentMood ?
+                `I'm feeling ${currentMood}. ${queryInput}` :
+                queryInput || "Can you give me some advice or encouragement?";
+            // This function needs to be implemented in the Python backend
+            getLlamaResponse(llamaQuery).then(response => {
+                document.getElementById('llama-response').textContent = response;
+            });
+        }
+        // This function will be replaced by the actual implementation in Gradio
+        function getLlamaResponse(query) {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    resolve("This is a placeholder response from Llama 3. Implement the actual API call in the Gradio backend.");
+                }, 1000);
+            });
+        }
+    </script>
+</body>
+</html>
+"""
 # Load the tokenizer and model
 tokenizer = AutoTokenizer.from_pretrained("meta-llama/Meta-Llama-3-8B-Instruct")
 terminators = [
     tokenizer.eos_token_id,
+    tokenizer.convert_tokens_to_ids("<|eot_id|>")
 ]
 @spaces.GPU(duration=120)
         outputs.append(text)
     return "".join(outputs)
+def get_llama_response(query):
+    response = chat_llama3_8b(query, [], temperature=0.7, max_new_tokens=256)
     return response
+# Gradio interface
+with gr.Blocks() as demo:
+    gr.HTML(EMOTIPAL_HTML)
+    query_input = gr.Textbox(visible=False)
+    response_output = gr.Textbox(visible=False)
+    gr.Interface(
+        fn=get_llama_response,
+        inputs=query_input,
+        outputs=response_output,
+        live=True
+    )
 if __name__ == "__main__":
     demo.launch()