Spaces:

eaglelandsonce
/

llama3LivelyHachathon

Sleeping

App Files Files Community

eaglelandsonce commited on about 20 hours ago

Commit

395335a

•

1 Parent(s): 8105d14

Update app.py

Browse files

Files changed (1) hide show

app.py +98 -130

app.py CHANGED Viewed

@@ -7,127 +7,36 @@ from threading import Thread
 # 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")
 model = AutoModelForCausalLM.from_pretrained("meta-llama/Meta-Llama-3-8B-Instruct", device_map="auto")
@@ -163,21 +72,80 @@ def chat_llama3_8b(message: str, history: list, temperature: float, max_new_toke
         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()

 # 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")
 model = AutoModelForCausalLM.from_pretrained("meta-llama/Meta-Llama-3-8B-Instruct", device_map="auto")
         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()