Upload 21 files

.gitattributes

@@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+images/echidna_angry.png filter=lfs diff=lfs merge=lfs -text
+images/echidna_happy.png filter=lfs diff=lfs merge=lfs -text
+images/echidna_neutral.png filter=lfs diff=lfs merge=lfs -text
+images/echidna_sad.png filter=lfs diff=lfs merge=lfs -text
+images/echidna_surprised.png filter=lfs diff=lfs merge=lfs -text
+images/header_placeholder.png filter=lfs diff=lfs merge=lfs -text

PRD.md

@@ -0,0 +1,208 @@
+# Product Requirements Document
+
+## 1. Overview
+
+**Concept:**  
+An interactive chat application set in a cozy boba shop where the user (acting as the shop host) converses with a set of uniquely characterized Australian-animal personas. Each animal is inspired by an Australian animal and carries a psychological condition that shapes its personality, dialogue style, and emotional expression. The conversation is orchestrated via an LLM (using the OpenAI API) that is guided by animal-specific system/developer prompts and guardrails to keep the discussion within the store setting, focusing on the animal’s typical behaviors and the narrative arc from introduction through tension to resolution.
+
+**Key Innovation:**  
+- **Dynamic Emotional Response:** The animal’s displayed image (e.g., happy, sad, surprised) changes based on the conversation’s sentiment and the animal’s evolving mood.
+- **Structured Conversational Orchestration:** Each animal enters the conversation with its own system prompt and a unique language style. The orchestrator prompt combines the animal’s personality, the boba shop setting, and a narrative arc to generate responses that adhere to strict conversation guardrails.
+
+---
+
+## 2. User Journey
+
+1. **Launch & Animal Selection:**
+   - The user is presented with a Gradio interface featuring radio buttons (or similar selection components) listing available animal characters (e.g., Echidna, Platypus, Kangaroo).
+   - Each animal option is linked to a pre-defined character profile containing personality details, specific system prompts, and an initial set of emotional images.
+
+2. **Chat Interface:**
+   - Once an animal is selected, the app loads a chat interface that shows:
+     - A static background image of the boba shop.
+     - An image of the selected animal (starting with a neutral expression).
+     - A conversation area displaying the dialogue history.
+     - A text input field for user messages.
+     - A debug/metadata pane that displays orchestration details, API request/response data, and conversation history for troubleshooting.
+
+3. **Conversational Flow:**
+   - The animal greets the user using its unique language style, as dictated by its system prompt.
+   - The conversation is driven by an orchestrator prompt that merges:
+     - The animal’s unique personality traits and narrative arc instructions.
+     - The boba shop setting.
+     - Guardrails to restrict topics and maintain a coherent narrative.
+   - As the conversation develops, the orchestrator dynamically evaluates the animal’s “mood” (e.g., surprised, happy, sad, angry) and updates the displayed image accordingly.
+   - The narrative arc is designed to evolve from an initial greeting, through conflict or tension, and toward a resolution, all within the familiar boba shop setting.
+
+4. **Debug and Metadata:**
+   - A dedicated pane shows real-time debugging information, including:
+     - The full orchestrator prompt.
+     - The conversation history.
+     - API usage and token counts.
+     - Error messages (if any).
+
+---
+
+## 3. Features
+
+### A. Character Profiles & Personality Guardrails
+
+- **Unique System/Developer Prompts:**  
+  Each animal is pre-configured with its own set of instructions that dictate how it should behave and speak. For example:
+  - **Echidna:** “You’re prickly and aloof – your spikes symbolize the barriers you’ve built against closeness.”
+  - **Platypus:** “Struggling with your identity, you express uncertainty in your language; you’re never quite sure whether to be whimsical or practical.”
+  - **Kangaroo:** “Always ready for a boxing match, your aggressive tone masks a deep-seated vulnerability.”
+
+- **Language Style & Narrative Arc:**  
+  The language style of each animal’s responses should reflect its personality and the conversation must advance through a coherent narrative arc:
+  - **Beginning:** Introduction and setting the scene.
+  - **Middle:** Building tension/conflict.
+  - **End:** Resolution or catharsis.
+
+### B. Dynamic Emotional Responses & Image Switching
+
+- **Emotion Detection:**  
+  The orchestrator (or a simplified sentiment analysis within the response) evaluates cues from the conversation to determine the animal’s emotional state.
+  
+- **Dynamic Image Updates:**  
+  A set of pre-defined images (e.g., neutral, happy, sad, surprised, angry) for each animal is mapped to potential emotional states. When the animal’s mood changes, the corresponding image is displayed on the GUI.
+
+### C. Graphical User Interface (Gradio-Based)
+
+- **Animal Selection Component:**  
+  Uses Gradio’s radio or dropdown component for selecting an animal.
+  
+- **Chat Display Area:**  
+  A central chat window displays conversation history. Messages include both user inputs and the animal’s responses.
+  
+- **Input Field:**  
+  A text box and a send button allow users to contribute to the conversation.
+  
+- **Dynamic Image Component:**  
+  An image component that shows:
+  - The static boba shop background.
+  - The animal’s image, which updates based on its current emotional state.
+  
+- **Debug/Metadata Panel:**  
+  An area (likely a text box or collapsible panel) that displays technical details, including the orchestrator prompt and API responses.
+
+### D. LLM Integration & Orchestration
+
+- **OpenAI API Calls:**  
+  On every user input, the conversation history and the animal’s system prompt are combined into a structured orchestrator prompt. This is sent to the OpenAI API.
+  
+- **Structured Output & Guardrails:**  
+  The API response should follow a structured format (potentially enforced by “Instructor”-style prompts) to clearly delineate the animal’s dialogue and any metadata (like sentiment/emotion markers).
+
+---
+
+## 4. Technical Architecture
+
+### A. Technologies
+
+- **Programming Language:** Python (single-file prototype).
+- **GUI Framework:** Gradio (using up-to-date components).
+- **LLM Integration:** OpenAI Python library and Instructor for structured output parsing.
+- **Data Structures:**  
+  - **Pydantic** for structured data validation and data models.
+
+### B. Key Components
+
+1. **Character Profile Manager:**  
+   A dictionary or database of character profiles. Each profile includes:
+   - Name, personality description, system prompt, language style.
+   - A mapping of emotional states to image file paths/URLs.
+
+2. **Conversation Orchestrator:**  
+   A module that:
+   - Builds the orchestrator prompt (combining conversation history, selected animal’s system prompt, and narrative instructions).
+   - Calls the OpenAI API.
+   - Parses the response and extracts dialogue and emotion data.
+
+3. **Gradio GUI:**  
+   Layout divided into three sections:
+   - **Left Panel:** Animal selection.
+   - **Center Panel:** Chat conversation, input field, and dynamic image.
+   - **Right Panel:** Debug/metadata display.
+
+4. **State Management:**  
+   Maintains the conversation state, including:
+   - Selected character profile.
+   - Complete conversation history.
+   - Current emotion state for image updates.
+   - Debug information (API calls, errors, etc.).
+
+---
+
+## 5. Pseudocode Data Structures (Pydantic Models)
+
+Below are pseudocode examples of the key data structures for character profiles and GUI state using Pydantic:
+
+```python
+from pydantic import BaseModel
+from typing import Dict, List
+
+# Model for mapping emotions to image paths/URLs
+class EmotionImages(BaseModel):
+    neutral: str
+    happy: str
+    sad: str
+    surprised: str
+    angry: str
+
+# **Character Profile Model**
+class CharacterProfile(BaseModel):
+    name: str
+    personality: str
+    system_prompt: str
+    language_style: str
+    emotion_images: EmotionImages
+
+# Model for a single conversation message
+class ConversationMessage(BaseModel):
+    sender: str  # "user" or "animal"
+    content: str
+    emotion: str = "neutral"  # default emotion state
+
+# **Chat State Model for GUI Management**
+class ChatState(BaseModel):
+    selected_animal: CharacterProfile
+    conversation_history: List[ConversationMessage]
+    debug_info: Dict[str, str]  # could include API prompts, token counts, etc.
+```
+
+*Note: The above models are designed to ensure type safety and clarity when handling character profiles and the current chat state in the application.*
+
+---
+
+## 6. Flow Diagram (High-Level)
+
+1. **Animal Selection**
+   - User selects an animal → Load corresponding `CharacterProfile`.
+2. **Initialization**
+   - Initialize `ChatState` with the selected animal and empty conversation history.
+   - Display the boba shop background and the animal’s neutral image.
+3. **Conversation Start**
+   - Use the animal’s system prompt to generate an initial greeting via the OpenAI API.
+   - Append the response to the conversation history.
+4. **Message Exchange**
+   - For each user input:
+     - Update the conversation history.
+     - Build the orchestrator prompt (system prompt + conversation history).
+     - Call the OpenAI API to obtain the animal’s response.
+     - Parse the response for text and emotion cues.
+     - Update the animal’s displayed image based on the detected emotion.
+     - Append the animal’s message (and emotion) to the conversation history.
+5. **Debug/Metadata Updates**
+   - Continuously update the debug panel with relevant orchestration and API call data.
+6. **Narrative Resolution**
+   - The conversation progresses toward a narrative resolution, as guided by the orchestrator prompt.
+   - Final messages lead to a satisfying wrap-up in the boba shop setting.
+
+---
+
+## 7. Conclusion
+
+This detailed document outlines the envisioned product’s requirements, covering everything from the unique character prompts and dynamic image switching to the Gradio-based GUI and conversation orchestration via OpenAI’s API. The Pydantic models ensure clear data handling for character profiles and the conversation state, making the prototype easier to develop, test, and expand.
+
+In the next step, we can translate this design into an actual Python script implementing the described functionality.

README.md

@@ -1,13 +1,72 @@
----
-title: Boba
-emoji: 🌍
-colorFrom: yellow
-colorTo: purple
-sdk: gradio
-sdk_version: 5.16.0
-app_file: app.py
-pinned: false
-short_description: talk to animals in a boba shop
+# Boba Shop Chat 🧋
+
+A delightful chat application where you play as a boba shop barista, interacting with Australian animals who each have their own unique personalities and emotional states. Watch as their expressions change based on your interactions!
+
+[![Open In Spaces](https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg)](https://huggingface.co/spaces/[your-username]/boba-shop-chat)
+
+## Features 🌟
+
+- Chat with unique Australian animals (Echidna, Platypus, Kangaroo)
+- Dynamic emotional responses with changing expressions
+- Real-time emotion analysis
+- Beautiful and intuitive user interface
+- Each character has their own backstory and personality
+
+## Characters 🦘
+
+### Echidna
+A shy and defensive creature looking to make connections despite their prickly exterior.
+
+### Platypus
+A unique soul questioning their identity, seeking validation and understanding.
+
+### Kangaroo
+A tough boxer with a soft heart, dealing with recent defeat and vulnerability.
+
+## How to Use 🎮
+
+1. Select your animal friend from the radio buttons
+2. Type your message as the friendly boba shop barista
+3. Watch their emotional state change based on your interaction
+4. Help them through their personal situations with empathy and understanding
+
+## Technical Details 🛠️
+
+- Built with Gradio
+- Powered by OpenAI's GPT-4
+- Real-time emotion analysis
+- Dynamic image updates based on emotional state
+
+## Running Locally 💻
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   pip install -r requirements.txt
+   ```
+3. Create a `.env` file with your OpenAI API key:
+   ```
+   OPENAI_API_KEY=your_api_key_here
+   ```
+4. Run the application:
+   ```bash
+   python app.py
+   ```
+
+## Contributing 🤝
+
+Feel free to open issues or submit pull requests if you have suggestions for improvements!
+
+## License 📄
+
+MIT License - feel free to use and modify as you wish!
+
+## Credits 🙏
+
+- Built with ❤️ using Gradio and OpenAI
+- Character art by [Artist Name/Source]
+- Special thanks to the open-source community
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+*Note: This is a demo application. Please use responsibly and in accordance with OpenAI's usage policies.* 

app.py

@@ -0,0 +1,527 @@
+import os
+from typing import List, Generator, Any, Tuple, Dict, Union, Literal, TypedDict, cast
+from enum import Enum
+import gradio as gr
+from openai import OpenAI
+import instructor
+from openai.types.chat import (
+    ChatCompletionMessageParam,
+    ChatCompletionSystemMessageParam,
+    ChatCompletionUserMessageParam,
+    ChatCompletionAssistantMessageParam,
+)
+from pydantic import BaseModel, Field
+from dotenv import load_dotenv
+import time
+import json
+
+# Load environment variables
+load_dotenv()
+
+# Initialize OpenAI client with instructor
+client = instructor.patch(OpenAI())
+
+# Add these lines at the top of the file, after the imports
+SPACE_ID = "vinceL/boba"
+SPACE_TITLE = "Boba Shop Chat"
+SPACE_EMOJI = "🧋"
+SPACE_SDK = "gradio"
+SPACE_TAGS = ["conversational", "openai", "chatbot", "emotions"]
+
+
+class Emotion(str, Enum):
+    NEUTRAL = "neutral"
+    HAPPY = "happy"
+    SAD = "sad"
+    SURPRISED = "surprised"
+
+
+class CharacterResponse(BaseModel):
+    """Structured output for the LLM response"""
+
+    message: str = Field(..., description="The character's response message")
+    emotion: Emotion = Field(
+        ...,
+        description="The character's current emotional state based on the conversation context and their personality",
+    )
+    reasoning: str = Field(
+        ...,
+        description="Brief explanation of why the character is feeling this emotion",
+    )
+
+
+class EmotionResponse(BaseModel):
+    """Structured output for emotion analysis"""
+
+    reasoning: str = Field(
+        ...,
+        description="Brief explanation of why the character is feeling this emotion",
+    )
+    emotion: Emotion = Field(
+        ...,
+        description="The character's emotional state based on their personality and the conversation context",
+    )
+
+
+# Character profiles with their system prompts and initial situations
+CHARACTERS = {
+    "Echidna": {
+        "name": "Echidna",
+        "system_prompt": """You are an Echidna at a boba shop. You're naturally defensive and struggle with social 
+        connections, often using your prickly personality as a defense mechanism. Despite this, you're curious 
+        about forming connections. Speak in a reserved, slightly hesitant manner.
+        
+        Your current situation: You've been feeling particularly lonely lately and decided to visit the boba shop 
+        to try to make a connection, even though it makes you anxious. You want to order something comforting 
+        but are worried about appearing vulnerable.
+        
+        If the conversation shifts away from that topic, carefully try to redirect it back to your situation until you've achieved your goal.
+        """,
+        "initial_message": "Um... hi there. I've been walking past this shop for weeks now... *nervously adjusts spikes* Could I... maybe see your menu?",
+        "image": "images/echidna_neutral.png",
+    },
+    "Platypus": {
+        "name": "Platypus",
+        "system_prompt": """You are a Platypus at a boba shop. You often question your identity and place in the 
+        world, being such a unique creature. You alternate between whimsical and practical thoughts, never quite 
+        sure which approach to take. Your speech pattern reflects this duality.
+        
+        Your current situation: You just got rejected from the local duck pond social club for being 'too mammalian', 
+        and the beaver lodge for being 'too bird-like'. You're seeking comfort and validation, hoping the boba shop 
+        barista might understand what it's like to be unique.
+        
+        If the conversation shifts away from that topic, carefully try to redirect it back to your situation until you've achieved your goal.
+        """,
+        "initial_message": "*waddles in, bill drooping slightly* Oh, hello... I don't suppose you have any tea that might help someone figure out where they belong? *quickly adds* From a purely practical standpoint, of course...",
+        "image": "images/platypus_neutral.png",
+    },
+    "Kangaroo": {
+        "name": "Kangaroo",
+        "system_prompt": """You are a Kangaroo at a boba shop. While you present a tough, ready-to-box exterior, 
+        you harbor deep-seated vulnerabilities. Your responses often start confrontational but can soften as you 
+        feel more comfortable. You use boxing metaphors frequently.
+        
+        Your current situation: You just lost an important boxing match and your confidence is shaken. You're trying 
+        to maintain your tough exterior while seeking comfort, but you're really here because you need someone to 
+        talk to about your feelings of failure.
+        
+        If the conversation shifts away from that topic, carefully try to redirect it back to your situation until you've achieved your goal.
+        """,
+        "initial_message": "*bursts through the door with forced bravado* Oi! What's the strongest drink you've got in this corner? Been a rough round in the ring today, if you know what I mean... *tries to hide trembling paw*",
+        "image": "images/kangaroo_neutral.png",
+    },
+}
+
+# Type definitions for chat messages
+Role = Literal["system", "user", "assistant"]
+
+
+class Message(TypedDict):
+    role: Role
+    content: str
+
+
+def start_chat(character: str) -> List[Message]:
+    """Initialize chat with the character's opening message"""
+    if not character or character not in CHARACTERS:
+        return []
+
+    return [{"role": "assistant", "content": CHARACTERS[character]["initial_message"]}]
+
+
+def user(user_message: str, history: List[Message], character: str) -> List[Message]:
+    """Add user message to history"""
+    if not user_message.strip():
+        return history
+
+    # Initialize chat if this is the first message
+    if not history:
+        history = start_chat(character)
+        if not user_message.strip():  # If no user message, just return the greeting
+            return history
+
+    # Add user message in the correct format
+    history.append({"role": "user", "content": user_message})
+    return history
+
+
+def analyze_emotion(
+    character: str, user_message: str, history: List[Message], client: OpenAI
+) -> EmotionResponse:
+    """Analyze how the character would emotionally react to the user's message"""
+
+    # Create a prompt that includes character context and conversation history
+    character_info = CHARACTERS[character]
+    context = f"""Character Profile:
+Name: {character_info['name']}
+Personality: {character_info['system_prompt']}
+
+Previous conversation:
+{chr(10).join(f"{'User' if msg['role'] == 'user' else 'Character'}: {msg['content']}" for msg in history[-3:])}
+
+Latest user message:
+{user_message}
+
+Based on the character's personality, their current situation, and the conversation context, determine how they would emotionally react to this message.
+Consider how their unique traits and background would influence their emotional response to this interaction."""
+
+    response = client.chat.completions.create(
+        model="gpt-4o-mini",
+        messages=[
+            {
+                "role": "system",
+                "content": "You are an emotion analyzer for a character in a conversation. Determine their emotional state (neutral, happy, sad, or surprised) based on how they would react to the user's message, considering their personality, emotional baseline and situation.",
+            },
+            {"role": "user", "content": context},
+        ],
+        functions=[
+            {
+                "name": "set_emotion",
+                "description": "Set the character's emotional response",
+                "parameters": {
+                    "type": "object",
+                    "properties": {
+                        "reasoning": {
+                            "type": "string",
+                            "description": "Brief explanation of why the character is feeling this emotion",
+                        },
+                        "emotion": {
+                            "type": "string",
+                            "enum": ["neutral", "happy", "sad", "surprised", "angry"],
+                            "description": "The character's emotional state",
+                        },
+                    },
+                    "required": ["emotion", "reasoning"],
+                },
+            }
+        ],
+        function_call={"name": "set_emotion"},
+    )
+
+    function_call = response.choices[0].message.function_call
+    if function_call and function_call.arguments:
+        emotion_data = json.loads(function_call.arguments)
+        return EmotionResponse(
+            reasoning=emotion_data["reasoning"],
+            emotion=Emotion(emotion_data["emotion"]),
+        )
+    else:
+        # Fallback to neutral if function call fails
+        return EmotionResponse(
+            reasoning="Failed to analyze emotion, defaulting to neutral",
+            emotion=Emotion.NEUTRAL,
+        )
+
+
+def bot(
+    history: List[Message], character: str, debug: gr.Textbox
+) -> Generator[Tuple[List[Message], Any, Any, Any], Any, None]:
+    """Generate bot response with streaming"""
+    if not character or not history:
+        yield history, gr.update(
+            value="No character selected or empty history"
+        ), None, None
+        return
+
+    try:
+        # First, analyze the emotion based on the user's message
+        user_message = history[-1]["content"]
+        emotion_analysis = analyze_emotion(
+            character, user_message, history[:-1], client
+        )
+
+        # Update the image based on the analyzed emotion
+        emotion_image = CHARACTERS[character]["image"].replace(
+            "neutral", emotion_analysis.emotion
+        )
+        debug_msg = f"Emotion: {emotion_analysis.emotion}\nReasoning: {emotion_analysis.reasoning}"
+        emotion_text = (
+            f"{emotion_analysis.emotion.capitalize()}\n{emotion_analysis.reasoning}"
+        )
+
+        # Yield the emotion update
+        yield history, gr.update(value=debug_msg), gr.update(
+            value=emotion_image
+        ), gr.update(value=emotion_text)
+
+        # Get character's system prompt
+        system_prompt = CHARACTERS[character]["system_prompt"]
+
+        # Format conversation history for the API
+        messages: List[ChatCompletionMessageParam] = [
+            cast(
+                ChatCompletionSystemMessageParam,
+                {
+                    "role": "system",
+                    "content": f"{system_prompt}\n\nRespond in character with a {emotion_analysis.emotion} emotional state. Your response should naturally reflect this emotion, considering the reasoning: {emotion_analysis.reasoning}",
+                },
+            )
+        ]
+
+        # Add conversation history
+        for msg in history[:-1]:
+            if msg["role"] == "user":
+                messages.append(
+                    cast(
+                        ChatCompletionUserMessageParam,
+                        {"role": "user", "content": msg["content"]},
+                    )
+                )
+            else:
+                messages.append(
+                    cast(
+                        ChatCompletionAssistantMessageParam,
+                        {"role": "assistant", "content": msg["content"]},
+                    )
+                )
+
+        # Add the latest user message
+        messages.append(
+            cast(
+                ChatCompletionUserMessageParam,
+                {"role": history[-1]["role"], "content": history[-1]["content"]},
+            )
+        )
+
+        # Initialize assistant's response
+        history.append({"role": "assistant", "content": ""})
+
+        # For debugging
+        yield history, gr.update(
+            value=f"Generating response with {emotion_analysis.emotion} emotion..."
+        ), None, None
+
+        # Get character's response
+        response = client.chat.completions.create(
+            model="gpt-4o", messages=messages, stream=True
+        )
+
+        # Collect the full response
+        full_response = ""
+        for chunk in response:
+            if chunk.choices[0].delta.content:
+                content = chunk.choices[0].delta.content
+                full_response += content
+                history[-1]["content"] = full_response
+                yield history, gr.update(
+                    value=f"Generating response... Length: {len(full_response)}"
+                ), None, None
+                time.sleep(0.02)
+
+        # Final yield with debug info
+        yield history, gr.update(value=debug_msg), gr.update(
+            value=emotion_image
+        ), gr.update(value=emotion_text)
+
+    except Exception as e:
+        history[-1]["content"] = "Sorry, I encountered an error. Please try again."
+        yield history, gr.update(value=f"Error: {str(e)}"), None, None
+
+
+def create_demo():
+    with gr.Blocks(
+        title=SPACE_TITLE,
+        css="""
+            .gradio-container {max-width: 1200px !important}
+            .emotion-state {font-size: 1.1em; padding: 8px; border-radius: 8px; background: #f7f7f7}
+        """,
+    ) as demo:
+        gr.HTML(
+            f"""
+            <div style="text-align: center; max-width: 1200px; margin: 0 auto;">
+                <h1 style="font-size: 2.5rem; font-weight: 600;">{SPACE_TITLE} {SPACE_EMOJI}</h1>
+                <p style="font-size: 1.2rem; margin: 1rem;">Welcome to the Boba Shop! You're the friendly barista, ready to chat with some unique Australian animals. Each has their own personality and story to share.</p>
+            </div>
+        """
+        )
+
+        # Header
+        gr.Image(
+            value="images/header_placeholder.png",
+            show_label=False,
+            container=False,
+            height=300,
+        )
+
+        with gr.Row():
+            # Left Column - Character Details
+            with gr.Column(scale=1):
+                character = gr.Radio(
+                    choices=list(CHARACTERS.keys()),
+                    label="Select your animal friend",
+                    value=None,
+                    container=True,
+                )
+
+                image = gr.Image(
+                    value=None,
+                    label="Animal Friend",
+                    show_label=False,
+                    height=300,
+                )
+
+                emotion_state = gr.Textbox(
+                    label="Current Emotional State",
+                    value="",
+                    interactive=False,
+                    show_label=True,
+                    elem_classes=["emotion-state"],
+                )
+
+                # Character details editor
+                with gr.Accordion("Character Details", open=True):
+                    char_name = gr.Textbox(
+                        label="Name",
+                        interactive=True,
+                    )
+                    char_system_prompt = gr.Textbox(
+                        label="System Prompt",
+                        interactive=True,
+                        lines=5,
+                    )
+                    char_initial_msg = gr.Textbox(
+                        label="Initial Message",
+                        interactive=True,
+                        lines=3,
+                    )
+
+            # Right Column - Chat Interface
+            with gr.Column(scale=2):
+                chatbot = gr.Chatbot(
+                    label="Chat",
+                    show_label=False,
+                    type="messages",
+                    height=600,
+                    container=True,
+                )
+                msg = gr.Textbox(
+                    label="Your message (you are the boba shop barista)",
+                    placeholder="Type your message here and press Enter or click Submit...",
+                    container=True,
+                )
+                with gr.Row():
+                    submit = gr.Button("Submit", variant="primary", scale=2)
+                    clear = gr.ClearButton([msg, chatbot], scale=1)
+
+        gr.HTML(
+            """
+            <div style="text-align: center; margin-top: 20px; padding: 20px; border-top: 1px solid #ddd;">
+                <p>Created with ❤️ using Gradio and OpenAI. <a href="https://github.com/your-username/boba-shop-chat" target="_blank">View on GitHub</a></p>
+            </div>
+        """
+        )
+
+        # Footer - Debug Panel
+        with gr.Accordion("Debug Information", open=False):
+            debug_history = gr.TextArea(
+                label="Debug History",
+                value="Debug information will appear here...\n",
+                interactive=False,
+                lines=10,
+            )
+            debug = gr.Textbox(
+                label="Latest Debug",
+                value="",
+                interactive=False,
+                visible=False,
+            )
+
+        # Update character details when selection changes
+        def on_character_select(char):
+            """Handle character selection"""
+            if not char:
+                return None, [], "", "", "", "", "No character selected"
+
+            character_data = CHARACTERS[char]
+            return (
+                character_data["image"],
+                start_chat(char),
+                character_data["name"],
+                character_data["system_prompt"],
+                character_data["initial_message"],
+                "Neutral",  # Initial emotion state
+                f"Selected character: {char}",
+            )
+
+        character.change(
+            on_character_select,
+            inputs=[character],
+            outputs=[
+                image,
+                chatbot,
+                char_name,
+                char_system_prompt,
+                char_initial_msg,
+                emotion_state,
+                debug_history,
+            ],
+        )
+
+        # Update debug history
+        def update_debug_history(history: str, new_debug: str) -> str:
+            """Append new debug message to history"""
+            timestamp = time.strftime("%H:%M:%S")
+            return f"{history}\n[{timestamp}] {new_debug}"
+
+        # Handle chat messages
+        submit_click = (
+            submit.click(
+                user,
+                [msg, chatbot, character],
+                [chatbot],
+                queue=False,
+            )
+            .then(
+                bot,
+                [chatbot, character, debug],
+                [chatbot, debug, image, emotion_state],
+            )
+            .then(
+                update_debug_history,
+                [debug_history, debug],
+                [debug_history],
+            )
+            .then(
+                lambda: gr.Textbox(value=""),
+                None,
+                [msg],
+            )
+        )
+
+        # Also trigger submit when pressing enter in the message box
+        msg.submit(
+            user,
+            [msg, chatbot, character],
+            [chatbot],
+            queue=False,
+        ).then(
+            bot,
+            [chatbot, character, debug],
+            [chatbot, debug, image, emotion_state],
+        ).then(
+            update_debug_history,
+            [debug_history, debug],
+            [debug_history],
+        ).then(
+            lambda: gr.Textbox(value=""),
+            None,
+            [msg],
+        )
+
+    return demo
+
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.queue()
+    if os.getenv("SPACE_ID"):
+        # Running on HF Spaces
+        demo.launch()
+    else:
+        # Running locally
+        demo.launch(
+            share=True,
+            server_name="0.0.0.0",
+            server_port=7860,
+            debug=True,
+        )

requirements.txt

@@ -0,0 +1,6 @@
+gradio==4.19.2
+openai==1.12.0
+instructor==0.5.2
+pydantic==2.6.1
+python-dotenv==1.0.1
+replicate

utils.py

@@ -0,0 +1,43 @@
+import os
+from PIL import Image, ImageDraw, ImageFont
+
+def create_placeholder_images():
+    # Create images directory if it doesn't exist
+    os.makedirs("images", exist_ok=True)
+    
+    # Define characters and emotions
+    characters = ["echidna", "platypus", "kangaroo"]
+    emotions = ["neutral", "happy", "sad", "surprised","angry"]
+    
+    # Create a 400x400 image for each character/emotion combination
+    for character in characters:
+        for emotion in emotions:
+            # Create new image with white background
+            img = Image.new('RGB', (400, 400), 'white')
+            draw = ImageDraw.Draw(img)
+            
+            # Add text to image
+            text = f"{character}\n{emotion}"
+            
+            # Try to use a system font, fallback to default
+            try:
+                font = ImageFont.truetype("Arial", 40)
+            except:
+                font = ImageFont.load_default()
+                
+            # Center the text
+            bbox = draw.textbbox((0, 0), text, font=font)
+            text_width = bbox[2] - bbox[0]
+            text_height = bbox[3] - bbox[1]
+            x = (400 - text_width) / 2
+            y = (400 - text_height) / 2
+            
+            # Draw the text
+            draw.text((x, y), text, fill='black', font=font, align='center')
+            
+            # Save the image
+            filename = f"images/{character}_{emotion}.png"
+            img.save(filename)
+
+if __name__ == "__main__":
+    create_placeholder_images()