diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -1,1871 +1,1281 @@
 import streamlit as st
 import streamlit.components.v1 as components
-import os
-from PIL import Image
-# Set the page layout
-st.set_page_config(layout="wide")
-import json
-import base64
-import time
-from dotenv import load_dotenv
-import os
-import requests
-
-# Try loading environment variables locally
-try:
-    from dotenv import load_dotenv
-    load_dotenv()
-except:
-    pass
-
-# Get the token from environment variables
-HF_TOKEN = os.environ.get("HF_TOKEN")
-
-
-if "framework" not in st.session_state:
-    st.session_state.framework = "gen"
-# Initialize state
-if "menu" not in st.session_state:
-    st.session_state.menu = "class"
-
-if "show_overlay" not in st.session_state:
-    st.session_state.show_overlay = True
-if "models" not in st.session_state:
-    st.session_state.models = []
-if "save_path" not in st.session_state:
-    st.session_state.save_path = ""
-# Initialize message storage
-if "messages" not in st.session_state:
-    st.session_state.messages = []
-if "input_text" not in st.session_state:
-    st.session_state.input_text = ""
-if "input_task" not in st.session_state:
-    st.session_state.input_task = ""
-if "generate_response" not in st.session_state:
-    st.session_state.generate_response = False
-    
-    
-if  st.session_state.show_overlay == False:
-    left = -9
-    top = -10
-else:
-    top= -6.75
-    left =-5
-# Folder to store chat histories
-CHAT_DIR = "chat_histories"
-os.makedirs(CHAT_DIR, exist_ok=True)
-# Set default chat_id if not set
-if "chat_id" not in st.session_state:
-    st.session_state.chat_id = "chat_1"
-# Save messages to a file
-def save_chat_history():
-    if st.session_state.messages:  # Only save if there's at least one message
-        with open(f"{CHAT_DIR}/{st.session_state.chat_id}.json", "w", encoding="utf-8") as f:
-            json.dump(st.session_state.messages, f, ensure_ascii=False, indent=4)
-#####################################################################################################
-
-# Function to load data
-
-def query_huggingface_model(selected_model: dict, input_data, input_type="text",max_tokens=512,task="text-classification",temperature=0.7, top_p=0.9 ):
-    API_URL = selected_model.get("url")
-    headers = {"Authorization": f"Bearer {HF_TOKEN}"}
-
-    try:
-        if input_type == "text":
-            if task == "text-generation":
-                payload = {
-                "messages": [
-                        {
-                            "role": "user",
-                            "content": input_data
-                        }
-                    ],                    
-                    "max_tokens": max_tokens,
-                    "temperature": temperature,
-                    "top_p": top_p,
-                    "model":selected_model.get("model")
-                }
-                    
-            else:
-                payload = {
-                    "inputs": input_data ,
-                  
-                    }
-            response = requests.post(API_URL, headers=headers, json=payload)
 
-        elif input_type == "image":
-            with open(input_data, "rb") as f:
-                data = f.read()
-                response = requests.post(API_URL, headers=headers, data=data)
-
-        else:
-            return {"error": f"Unsupported input_type: {input_type}"}
-
-        response.raise_for_status()
-        return response.json()
+st.set_page_config(layout="wide", page_title="Streamlit LLM Playground")
+st.markdown("""
+            <style>
+            #MainMenu, header, footer { visibility: hidden; }
+            html, body, .main {
+            height: 100%;
+            width: 100%;
+            margin: 5px;
+            color :white;
+            overflow: hidden !important;
+        }
+
+        iframe {
+            height:99vh !important;
+            width: 99.5vw !important;
+            border-radius: 5px ;
+            overflow: hidden !important;
+            margin-top:-15px;
+
+        }
+        
+        div[data-testid="stMainBlockContainer"]{
+           padding :0px !important;
+           margin-top:-15px;
+           }
+            </style>
+            """, unsafe_allow_html=True)
+html_code="""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LLM Studio Enhanced</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        /* General Styles */
+        
+        :root {
+            --bg-color-dark: #0D1117;
+            --bg-color-medium: #161B22;
+            --border-color: #30363D;
+            --text-color-primary: #c9d1d9;
+            --text-color-secondary: #8b949e;
+            --accent-color: #58a6ff;
+            --accent-glow: rgba(88, 166, 255, 0.3);
+            --user-bubble-bg: #21262d;
+            --model-bubble-bg: #161B22;
+            --error-color: #f85149;
+            --groq-color: #4CAF50;
+        }
+
+        body {
+            height: 100vh;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            background: var(--bg-color-dark);
+            font-family: 'Inter', sans-serif;
+            color: var(--text-color-primary);
+        }
+        
+        /* Main Container */
+        .studio-container {
+            width: 100%;
+            height: 100vh;
+            background-color: rgba(22, 27, 34, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+            display: flex;
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+
+        /* Sidebar Navigation */
+        .sidebar {
+            width: 240px;
+            background-color: rgba(13, 17, 23, 0.9);
+            padding: 24px;
+            border-right: 1px solid var(--border-color);
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
 
-    except requests.exceptions.RequestException as e:
-        return {"error": str(e)}
+        .sidebar-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding-bottom: 24px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 24px;
+        }
+        .sidebar-header .logo {
+            font-size: 28px;
+            color: var(--accent-color);
+            text-shadow: 0 0 10px var(--accent-glow);
+        }
+        .sidebar-header h1 {
+            font-size: 20px;
+            margin: 0;
+            color:white !important;
+            font-weight: 600;
+        }
 
-    
-    
-def extract_response_content(response):
-    print(f"Response is: {response}")
-    
-    # For text generation or image captioning
-    if isinstance(response, list):
-        if response and isinstance(response[0], dict) and "generated_text" in response[0]:
-            return response[0]["generated_text"]
-
-        elif response and isinstance(response[0], list) and "label" in response[0][0]:
-            # For text classification
-            return [(item["label"], round(item["score"], 3)) for item in response[0]]
-    
-    # For OpenAI-style chat responses
-    elif isinstance(response, dict):
-        if "choices" in response and isinstance(response["choices"], list):
-            try:
-                return response["choices"][0]["message"]["content"]
-            except (KeyError, IndexError, TypeError):
-                return "Error: Could not extract message from choices"
-
-        elif "error" in response:
-            return f"Error: {response['error']}"
-
-    return "Unknown response format"
-
-
-
-# Load a specific chat
-def load_chat_history(chat_id):
-    file_path = f"{CHAT_DIR}/{chat_id}.json"
-    if os.path.exists(file_path):
-        with open(file_path, "r", encoding="utf-8") as f:
-            st.session_state.messages = json.load(f)
-        st.session_state.chat_id = chat_id
-    else:
-        st.warning(f"No history found for {chat_id}.")
-    st.session_state.show_overlay = False
-
-    st.session_state.models = [
-    {
-        "model": "distilbert-base-uncased-finetuned-sst-2-english",
-        "url": "https://router.huggingface.co/hf-inference/models/distilbert/distilbert-base-uncased-finetuned-sst-2-english"
-    },
-     {
-        "model": "openai-community/roberta-base-openai-detector",
-        "url": "https://router.huggingface.co/hf-inference/models/openai-community/roberta-base-openai-detector"
-    },
-    {
-        "model": "nlptown/bert-base-multilingual-uncased-sentiment",
-        "url": "https://router.huggingface.co/hf-inference/models/nlptown/bert-base-multilingual-uncased-sentiment"
-    },
-    {
-        "model": "BAAI/bge-reranker-base",
-        "url": "https://router.huggingface.co/hf-inference/models/BAAI/bge-reranker-base"
-    },
-    {
-        "model": "SamLowe/roberta-base-go_emotions",
-        "url": "https://router.huggingface.co/hf-inference/models/SamLowe/roberta-base-go_emotions"
-    }
-]
-
-if st.session_state.framework == "gen":
-    encoded_logo = "hugging.png"
-    main_bg_ext = "png"
-    main_bg = "picturebg.jfif"
-
-
-  
-    st.markdown(
-        f"""
-        <style>
-        /* Container for logo and text */
-            /* Container for logo and text */
-            .logo-text-container {{
-                position: fixed;
-                top: 20px; /* Adjust vertical position */
-                left: 30px; /* Align with sidebar */
-                display: flex;
-                align-items: center;
-                gap: 15px;
-                width: 70%;
-                z-index:1000;
-            }}
-
-            /* Logo styling */
-            .logo-text-container img {{
-                width: 60px; /* Adjust logo size */
-                border-radius: 10px; /* Optional: round edges */
-                margin-left:-5px;
-                margin-top: -15px;
-
-            }}
-
-            /* Bold text styling */
-            .logo-text-container h1 {{
-                font-family: Nunito;
-                color: #0175C2;            
-                font-size: 25px;
-                font-weight: bold;
-                margin-right :100px;
-                padding:0px;
-                top:0;
-                margin-top: 10px;
-            }}
-            .logo-text-container i{{
-                font-family: Nunito;
-                color: orange;            
-                font-size: 15px;
-                margin-right :10px;
-                padding:0px;
-                margin-left:-15.5%;
-                margin-top:2% !important;
-            }}
-
-            /* Sidebar styling */
-            section[data-testid="stSidebar"][aria-expanded="true"] {{
-                margin-top: 100px !important; /* Space for the logo */
-                border-radius: 0 60px 0px 60px !important; /* Top-left and bottom-right corners */
-                width: 300px !important; /* Sidebar width */
-                background: none; /* No background */
-                color: white !important;
-            }}
-
-            header[data-testid="stHeader"] {{
-                background: transparent !important;
-                margin-right: 100px !important;
-                margin-top: 1px !important;
-                z-index: 1 !important;
-                
-                color: blue; /* White text */
-                font-family:  "Times New Roman " !important; /* Font */
-                font-size: 18px !important; /* Font size */
-                font-weight: bold !important; /* Bold text */
-                padding: 10px 20px; /* Padding for buttons */
-                border: none; /* Remove border */
-                transition: all 0.3s ease-in-out; /* Smooth transition */
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin: 10px 0;
-                width:90% !important;
-                left:5.5%;
-                height:60px;
-                margin-top:70px;
-                backdrop-filter: blur(10px);
-
-            }}
-
-            div[data-testid="stDecoration"] {{
-                background-image: none;
-            }}
-
-            div[data-testid="stApp"] {{
-             background: url(data:image/{main_bg_ext};base64,{base64.b64encode(open(main_bg, "rb").read()).decode()});
-
-                background-size: cover;  /* Ensure the image covers the full page */
-                background-position: center;
-                background-repeat:no-repeat;
-                height: 98vh;
-                width: 99.3%;
-                border-radius: 20px !important;
-                margin-left: 5px;
-                margin-right: 20px;
-                margin-top: 10px;
-                overflow: hidden;
-                backdrop-filter: blur(10px); /* Glass effect */
-                -webkit-backdrop-filter: blur(10px);
-                border: 1px solid rgba(255, 255, 255, 0.2); /* Light border */
-
-
-            }}
-            
+        /* UPDATED: New Chat Button Style & Position */
+        .new-chat-btn {
+            background: linear-gradient(135deg, #58a6ff, #3a8dff);
+            border: none;
+            color: #ffffff;
+            padding: 12px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 15px rgba(88, 166, 255, 0.2);
+        }
+        .new-chat-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(88, 166, 255, 0.3);
+        }
+
+        .nav-menu .nav-item {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s ease, color 0.3s ease;
+            font-weight: 500;
+            color: var(--text-color-primary);
+        }
+        .nav-menu .nav-item:hover { background-color: var(--bg-color-medium); }
+        .nav-menu .nav-item.active {
+            background-color: var(--accent-color);
+            color: var(--bg-color-dark);
+            font-weight: 600;
+            box-shadow: 0 0 15px var(--accent-glow);
+        }
+        .nav-menu .nav-item.active .material-icons { color: var(--bg-color-dark); }
+        .nav-menu .nav-item .material-icons {
+            color: var(--text-color-secondary);
+            transition: color 0.3s ease;
+        }
+        .nav-menu .nav-item:hover .material-icons { color: var(--text-color-primary); }
+        
+        .history-section {
+            margin-top: 24px;
+            padding-top: 24px;
+            border-top: 1px solid var(--border-color);
+            flex-grow: 1;
+            overflow-y: auto;
+            min-height: 100px;
+        }
+        .history-title {
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--text-color-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 12px;
+        }
+        .chat-history-list .history-item {
+            padding: 10px;
+            font-size: 14px;
+            border-radius: 6px;
+            cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 4px;
+            color: var(--text-color-secondary);
+        }
+        .chat-history-list .history-item:hover {
+            background-color: var(--bg-color-medium);
+            color: var(--text-color-primary);
+        }
+         .chat-history-list .history-item.active {
+            background-color: var(--user-bubble-bg);
+            color: var(--text-color-primary);
+            font-weight: 500;
+        }
+        
+        /* UPDATED: API Key Section Styling */
+        .api-key-section {
+            padding: 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background-color: var(--bg-color-medium);
+        }
+        .api-key-group {
+            margin-bottom: 12px;
+        }
+        .api-key-group:last-child {
+            margin-bottom: 0;
+        }
+        .api-key-section label {
+             font-size: 12px;
+            font-weight: 600;
+            color: var(--text-color-primary);
+            letter-spacing: 0.5px;
+            margin-bottom: 6px;
+            display: block;
+        }
+         .api-key-section input {
+            width: 100%;
+            box-sizing: border-box;
+            background-color: var(--bg-color-dark);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 8px;
+            color: var(--text-color-primary);
+            font-size: 12px;
+            transition: border-color 0.3s, box-shadow 0.3s;
+        }
+        .api-key-section input:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 8px var(--accent-glow);
+        }
+
+
+        /* Main Content Area */
+        .main-content {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        
+        .content-window {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
 
-            section[data-testid="stMain"] {{
-                overflow:hidden !important;
+        .prompt-view {
+            display: none;
+        }
+        .prompt-view.active {
+            display: flex;
+            flex-direction: column;
+        }
 
-            }}
-            
-            div[data-testid="stSlider"] {{
-                margin-top:45px;
-            }}
-            label[data-testid="stWidgetLabel"]{{
-                margin-left:20px !important;
-            }}
-            
-            div[data-baseweb="slider"] {{
-                border-radius: 30px;
-                padding-right:40px;
-                z-index: 1;
-            /* Glass effect background */
-                backdrop-filter: blur(2px);
-                -webkit-backdrop-filter: blur(12px);
-                /* Shiny blue borders (left & right) */
-                border-top: 2px solid rgba(255, 255, 155, 0.4); /* Light border */
-                margin-left:13px;
-                border-bottom: 2px solid rgba(255, 255, 155, 0.4); /* Light border */
-                
-                
-                }}
-                div[data-baseweb="slider"] > :nth-child(1)> div {{
-                margin-left:20px !important;
-                margin-top:10px;
-                }}
-                    div[data-testid="stSliderTickBarMin"]{{
-                        background:none !important;
-                        margin-left:20px !important;
-                        font-size:12px;
-                        margin-bottom:5px;
-                        font-family:  "Times New Roman " !important; /* Font */
-                    }}
-                    div[data-testid="stSliderTickBarMax"]{{
-                        background:none !important;
-                        font-size:12px;
-                        margin-bottom:5px;
-
-                        font-family:  "Times New Roman " !important; /* Font */
-                    }}
-                    div[data-testid="stSliderThumbValue"]{{
-                        font-size:12px;
-                        font-family:  "Times New Roman " !important; /* Font */
-
-                    }}
-                    div[data-testid="stProgress"]{{
-                        margin-right:25px;
-                        margin-top:-70px;
-                        height:10px !important;
-                        
-                    }}
-            [class*="st-key-content-container-3"] {{
-                margin-top: 50px;  /* Adjust top margin */
-                margin-left:500px !important;
-                color:orange;
-                font-size:2.2rem;
-
-            }}
+        /* Home Screen */
+        #home-screen {
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 40px;
+            display: none;
+        }
+        #home-screen.active { display: flex; }
+        #home-screen .logo { font-size: 60px; color: var(--accent-color); }
+        #home-screen h1 { font-size: 32px; margin: 16px 0 8px; color: var(--text-color-primary);
+}
+        #home-screen p { color: var(--text-color-secondary); max-width: 450px; line-height: 1.6; }
+
+        /* Chat History */
+        .chat-history-display {
+            flex-grow: 1;
+            padding: 24px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .chat-message {
+            display: flex;
+            gap: 16px;
+            align-items: flex-start;
+            position: relative; /* For action buttons */
+        }
+        .chat-message.user { justify-content: flex-end; }
         
-            /* Button row styling */
-            .button-row {{
-                display: flex;
-                justify-content: flex-start;
-                gap: 20px;
-                margin-bottom: 20px;
-            }}
-
+        .chat-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            font-weight: 600;
+            border: 1px solid var(--border-color);
+        }
+        .chat-message.user .chat-avatar { background-color: var(--bg-color-medium); }
+        .chat-message.model .chat-avatar { background-color: var(--accent-color); }
+        .chat-message.user .chat-avatar .material-icons { color: var(--text-color-primary); }
+        .chat-message.model .chat-avatar .material-icons { color: var(--bg-color-dark); font-size: 20px; }
+
+        .chat-bubble {
+            padding: 12px 18px;
+            border-radius: 20px;
+            max-width: 80%;
+            line-height: 1.6;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            border: 1px solid transparent;
+        }
+
+        /* UPDATED: Model Response Header & Bubble */
+        .model-response-header {
+            font-size: 11px;
+            color: var(--text-color-secondary);
+            margin-bottom: 8px;
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            opacity: 0.7;
+        }
+        .model-response-header .material-icons { font-size: 14px; }
+        .chat-message.user .chat-bubble {
+            background: linear-gradient(135deg, #58a6ff, #3a8dff);
+            color: #ffffff;
+            border-radius: 20px 4px 20px 20px;
+        }
+        .chat-message.model .chat-bubble {
+            background-color: var(--user-bubble-bg);
+            color: var(--text-color-primary);
+            border-color: var(--border-color);
+            border-radius: 4px 20px 20px 20px;
+        }
+        .chat-message.error .chat-bubble {
+            background-color: rgba(248, 81, 73, 0.1);
+            border-color: var(--error-color);
+            color: var(--error-color);
+        }
+
+        /* Styling for code blocks inside bubbles */
+        .chat-bubble pre {
+             background: var(--bg-color-dark) !important;
+             padding: 12px;
+             border-radius: 8px;
+             white-space: pre-wrap;
+             word-break: break-all;
+             font-family: 'Courier New', Courier, monospace;
+             font-size: 14px;
+             margin: 8px 0 0 0;
+        }
+
+        .chat-bubble img {
+            max-width: 100%;
+            border-radius: 8px;
+            margin-top: 8px;
+        }
         
-
-            .custom-button:hover {{
-                background-color: #0056b3;
-            }}
-            div.stButton > button p{{   
-            color: orange !important;
-            font-weight:bold;
-            }}
-            div.stButton > button {{                
-            color: orange !important; /* White text */
-            font-family:  "Times New Roman " !important; /* Font */
-            font-size: 18px !important; /* Font size */
-            font-weight: bold !important; /* Bold text */
-            padding: 10px 20px; /* Padding for buttons */
-            border: none; /* Remove border */
-            border-radius: 35px; /* Rounded corners */
-            transition: all 0.3s ease-in-out; /* Smooth transition */
+        /* ADDED: User Message Actions */
+        .message-actions {
+            position: absolute;
+            top: 50%;
+            left: -70px; /* Adjust as needed */
+            transform: translateY(-50%);
+            display: flex;
+            gap: 8px;
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+        }
+        .chat-message.user:hover .message-actions {
+            opacity: 1;
+        }
+        .action-icon {
+            cursor: pointer;
+            color: var(--text-color-secondary);
+            background-color: var(--bg-color-medium);
+            border-radius: 50%;
+            padding: 4px;
             display: flex;
             align-items: center;
-            transform: scale(1.05); /* Slightly enlarge button */
-            transform: scale(1.1); /* Slight zoom on hover */
             justify-content: center;
-            
+        }
+        .action-icon:hover {
+            color: var(--accent-color);
+        }
+        .action-icon .material-icons {
+            font-size: 18px;
+        }
+
+        /* Prompt Input Area */
+        .prompt-area {
+            padding: 16px 24px;
+            border-top: 1px solid var(--border-color);
+            background: var(--bg-color-dark);
+            margin-top: auto;
+        }
+        .prompt-examples {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 12px;
+            flex-wrap: wrap;
+        }
+        .prompt-example-btn {
+            background: var(--bg-color-medium);
+            border: 1px solid var(--border-color);
+            color: var(--text-color-secondary);
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 12px;
+        }
+        .prompt-example-btn:hover {
+            border-color: var(--accent-color);
+            color: var(--text-color-primary);
+        }
+        .input-wrapper {
+            display: flex;
+            gap: 12px;
+            align-items: flex-end;
+        }
+        textarea {
+            flex-grow: 1;
+            background-color: var(--bg-color-dark);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 12px 16px;
+            color: var(--text-color-primary);
+            font-family: 'Inter', sans-serif;
+            font-size: 16px;
+            resize: none;
+            height: 50px;
+            transition: height 0.2s;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 8px var(--accent-glow);
+        }
+        
+        .image-uploader {
+            width: 50px;
+            height: 50px;
+            border: 2px dashed var(--border-color);
+            border-radius: 8px;
+            cursor: pointer;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: border-color 0.3s ease;
+            flex-shrink: 0;
+            overflow: hidden;
+        }
+        .image-uploader:hover { border-color: var(--accent-color); }
+        .image-uploader .material-icons { font-size: 24px; color: var(--text-color-secondary); transition: opacity 0.2s; }
+        .image-uploader.loading .spinner { display: block; }
+        .image-uploader.loading .material-icons, .image-uploader.has-image .material-icons { display: none; }
+        
+        .spinner {
+            display: none;
+            width: 24px;
+            height: 24px;
+            border: 3px solid var(--border-color);
+            border-top-color: var(--accent-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        .image-preview {
+            display: none;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .image-uploader.has-image .image-preview { display: block; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        /* Models and Parameters Panel */
+        .right-panel {
+            width: 250px;
+            padding: 24px;
+            border-left: 1px solid var(--border-color);
+            background-color: rgba(13, 17, 23, 0.9);
+            flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+        }
+        .panel-header {
+            font-size: 14px;
+            color: var(--text-color-secondary);
+            font-weight: 500;
+            margin-bottom: 16px;
+        }
+        .right-panel ul { list-style: none; padding: 0; margin: 0; }
+        .model-item {
+            padding: 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-bottom: 8px;
+            font-weight: 500;
+            transition: background-color 0.3s;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: var(--text-color-primary);
+            position: relative;
+            padding-left: 30px; 
+        }
+        .model-item:hover { background-color: var(--bg-color-medium); }
+        .model-item.active {
+            background-color: var(--accent-color);
+            color: #ffffff;
+            font-weight: 600;
+        }
+        .model-item.groq-model::before {
+            content: 'G';
+            position: absolute;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-weight: bold;
+            color: var(--groq-color);
+            font-size: 14px;
+        }
+
+        .parameters-section {
+            margin-top: 24px;
+            padding-top: 24px;
+            border-top: 1px solid var(--border-color);
+        }
+        .parameter-control { margin-bottom: 16px; }
+        .parameter-control label {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            margin-bottom: 8px;
+            color: var(--text-color-primary);
+        }
+         .parameter-control label span:last-child {
+            font-weight: 600;
+            color: var(--text-color-primary);
+         }
+        .parameter-control input[type="range"] {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 4px;
+            background: var(--border-color);
+            border-radius: 2px;
+            outline: none;
+        }
+         .parameter-control input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 16px;
+            height: 16px;
+            background: var(--accent-color);
+            cursor: pointer;
+            border-radius: 50%;
+            box-shadow: 0 0 8px var(--accent-glow);
+        }
+        
+        .action-button {
+            background-color: var(--accent-color);
+            border: none;
+            color: white;
+            padding: 0 16px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.3s, box-shadow 0.3s;
+            height: 50px;
+            flex-shrink: 0;
+        }
+        .action-button:hover {
+             background-color: #4a9eff;
+             box-shadow: 0 0 15px var(--accent-glow);
+        }
+         .action-button:disabled {
+            background-color: var(--border-color);
+            cursor: not-allowed;
+            box-shadow: none;
+         }
+
+        @media (max-width: 1100px) {
+            .studio-container { flex-direction: column; height: auto; max-height: none; }
+            .sidebar {
+                width: 100%; border-right: none; border-bottom: 1px solid var(--border-color);
+                flex-direction: row; align-items: center; justify-content: space-between; padding: 16px;
+            }
+            .sidebar-header { border: none; margin: 0; padding: 0; }
+            .nav-menu { display: flex; gap: 8px; }
+            .nav-menu .nav-item { flex-direction: column; padding: 8px; gap: 4px; font-size: 12px; }
+            .right-panel { width: 100%; border-left: none; border-top: 1px solid var(--border-color); }
+        }
+        @media (max-width: 768px) {
+            body { padding: 0; }
+            .studio-container { border-radius: 0; min-height: 100vh; }
+            .sidebar { flex-direction: column; align-items: stretch; }
+            .nav-menu { justify-content: center; }
+        }
 
+    </style>
+</head>
+<body>
+    <div class="studio-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div>
+                <div class="sidebar-header">
+                    <span class="material-icons logo">auto_awesome</span><h1>LLM Studio</h1>
+                </div>
+                <button class="new-chat-btn" id="new-chat-btn"><span class="material-icons">add_circle</span>New Chat</button>
+                <nav class="nav-menu">
+                    <div class="nav-item active" data-target="text-generation"><span class="material-icons">text_fields</span><span>Text Generation</span></div>
+                    <div class="nav-item" data-target="image-to-text"><span class="material-icons">image</span><span>Image to Text</span></div>
+                    <div class="nav-item" data-target="text-classification"><span class="material-icons">label</span><span>Text Classification</span></div>
+                </nav>
+                <div class="history-section">
+                    <h3 class="history-title">History</h3>
+                    <div class="chat-history-list" id="chat-history-list">
+                        <!-- Chat history items will be dynamically inserted here -->
+                    </div>
+                </div>
+            </div>
+             <div class="api-key-section">
+                <div class="api-key-group">
+                    <label for="groq-token">Groq API Key</label>
+                    <input type="password" id="groq-token" placeholder="gsk_...">
+                </div>
+                <div class="api-key-group">
+                    <label for="hf-token">Hugging Face Token</label>
+                    <input type="password" id="hf-token" placeholder="hf_...">
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <div id="home-screen" class="content-window active">
+                 <span class="material-icons logo">auto_awesome</span>
+                 <h1>Welcome to LLM Studio</h1>
+                 <p>Select a mode from the left, or click "New Chat" to begin a new conversation. Your chat history will be saved here for this session.</p>
+            </div>
+
+            <div id="chat-view" class="content-window" style="display:none;">
+                 <div class="chat-history-display" id="chat-history-display"></div>
+                 <div id="prompt-container">
+                    <!-- Text Generation View -->
+                    <div id="text-generation" class="prompt-view active">
+                        <div class="prompt-area">
+                            <div class="prompt-examples" id="text-generation-examples"></div>
+                            <div class="input-wrapper">
+                                <textarea id="text-generation-prompt" placeholder="Enter your prompt here..."></textarea>
+                                <button class="action-button" data-target="text-generation"><span class="material-icons">send</span></button>
+                            </div>
+                        </div>
+                    </div>
 
-        }}
+                    <!-- Image to Text View -->
+                    <div id="image-to-text" class="prompt-view">
+                         <div class="prompt-area">
+                            <div class="prompt-examples" id="image-to-text-examples"></div>
+                            <div class="input-wrapper">
+                                <div id="image-uploader" class="image-uploader">
+                                <input type="file" id="image-upload-input" accept="image/*" style="display: none;">
+                                    <span class="material-icons">add_photo_alternate</span>
+                                    <div class="spinner"></div>
+                                    <img class="image-preview" id="image-preview" src="" alt="Image Preview"/>
+                                </div>
+                                <textarea id="image-to-text-prompt" placeholder="Optionally, add instructions..."></textarea>
+                                <button class="action-button" data-target="image-to-text" disabled><span class="material-icons">send</span></button>
+                            </div>
+                        </div>
+                    </div>
 
-        /* Hover effect */
-        div.stButton > button:hover {{
-            background: rgba(255, 255, 255, 0.2);
-            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
-            transform: scale(1.05); /* Slightly enlarge button */
-            transform: scale(1.1); /* Slight zoom on hover */
-            box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4); /* Glow effect */
-        }}
+                    <!-- Text Classification View -->
+                    <div id="text-classification" class="prompt-view">
+                        <div class="prompt-area">
+                            <div class="prompt-examples" id="text-classification-examples"></div>
+                            <div class="input-wrapper">
+                                <textarea id="text-classification-prompt" placeholder="Enter text to classify..."></textarea>
+                                <button class="action-button" data-target="text-classification"><span class="material-icons">send</span></button>
+                            </div>
+                        </div>
+                    </div>
+                 </div>
+            </div>
+        </main>
+
+        <!-- Right Panel -->
+        <aside class="right-panel">
+            <div>
+                <p class="panel-header">MODELS</p>
+                <ul id="model-list">
+                   <!-- Models will be dynamically inserted here -->
+                </ul>
+            </div>
+            <div class="parameters-section">
+                <p class="panel-header">PARAMETERS</p>
+                <div class="parameter-control">
+                    <label for="temperature"><span>Temperature</span><span id="temperature-value">0.9</span></label>
+                    <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.9">
+                </div>
+                <div class="parameter-control">
+                     <label for="top-p"><span>Top-P</span><span id="top-p-value">1.0</span></label>
+                    <input type="range" id="top-p" min="0" max="1" step="0.1" value="1.0">
+                </div>
+            </div>
+        </aside>
+    </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const navItems = document.querySelectorAll('.nav-item');
+    const promptViews = document.querySelectorAll('.prompt-view');
+    const modelList = document.getElementById('model-list');
+    const actionButtons = document.querySelectorAll('.action-button');
+    const newChatBtn = document.getElementById('new-chat-btn');
+    const chatHistoryList = document.getElementById('chat-history-list');
+    const chatHistoryDisplay = document.getElementById('chat-history-display');
+    const homeScreen = document.getElementById('home-screen');
+    const chatView = document.getElementById('chat-view');
+    const tempSlider = document.getElementById('temperature');
+    const tempValue = document.getElementById('temperature-value');
+    const topPSlider = document.getElementById('top-p');
+    const topPValue = document.getElementById('top-p-value');
+    const hfTokenInput = document.getElementById('hf-token');
+    const groqTokenInput = document.getElementById('groq-token');
+    const imageUploader = document.getElementById('image-uploader');
+    const imagePreview = document.getElementById('image-preview');
+
+    // App State
+    let activeMode = 'text-generation';
+    let activeModelInfo = {};
+    let temperature = 0.9;
+    let topP = 1.0;
+    let uploadedImageBase64 = null;
+    let uploadedImageDataUrl = null;
+    let chatSessions = {}; 
+    let activeChatId = null;
+    let editingMessageId = null; // To track which message is being edited
+
+    // UPDATED: taskConfig with Groq models
+    const taskConfig = {
+        'text-generation': {
+            examples: [
+                { title: "Explain quantum computing", prompt: "Explain quantum computing in simple terms." },
+                { title: "Python factorial function", prompt: "Write a Python function that calculates the factorial of a number." },
+                { title: "Email to boss", prompt: "Write a short, professional email to my boss requesting a meeting next week." }
+            ],
+            models: [
+                { id: "llama3-8b-8192", name: "Llama3 8B (Groq)", url: "https://api.groq.com/openai/v1/chat/completions", type: "chat", isGroq: true },
+                { id: "qwen/qwen3-32b", name: "qwen/qwen3-32b (Groq)", url: "https://api.groq.com/openai/v1/chat/completions", type: "chat", isGroq: true },
+                { id: "gemma2-9b-it", name: "gemma2-9b-it (Groq)", url: "https://api.groq.com/openai/v1/chat/completions", type: "chat", isGroq: true },
+                { id: "deepseek-ai/DeepSeek-V3", name: "DeepSeek-V3 (HF)", url: "https://router.huggingface.co/nebius/v1/chat/completions", type: "chat" },
+            ]
+        },
+        'image-to-text': {
+             examples: [
+                { title: "Describe scene", prompt: "Describe this scene in detail." },
+                { title: "Identify objects", prompt: "List all the objects you can identify." },
+                { title: "Suggest a caption", prompt: "Suggest a creative social media caption." }
+            ],
+            models: [
+                { id: "meta-llama/llama-4-scout-17b-16e-instruct", name: "meta-llama/llama-4-scout (Groq)", url: "https://api.groq.com/openai/v1/chat/completions", type: "image-to-text",isGroq: true  },
+                { id: "meta-llama/llama-4-maverick-17b-128e-instruct", name: "meta-llama/llama-4-maverick (Groq)", url: "https://api.groq.com/openai/v1/chat/completions", type: "image-to-text",isGroq: true  }
+            ]
+        },
+        'text-classification': {
+             examples: [
+                { title: "Sentiment analysis", prompt: "I'm so frustrated with customer service!" },
+                { title: "Topic identification", prompt: "The new legislation aims to reduce carbon emissions." },
+                { title: "Spam detection", prompt: "CLICK HERE to claim your prize!" }
+            ],
+            models: [
+                { id: "distilbert-base-uncased-finetuned-sst-2-english", name: "DistilBERT SST-2", url: "https://router.huggingface.co/hf-inference/models/distilbert/distilbert-base-uncased-finetuned-sst-2-english", type: "text-classification" },
+                { id: "SamLowe/roberta-base-go_emotions", name: "RoBERTa GoEmotions", url: "https://api-inference.huggingface.co/models/SamLowe/roberta-base-go_emotions", type: "text-classification" },
+                { id: "nlptown/bert-base-multilingual-uncased-sentiment", name: "BERT Multilingual", url: "https://api-inference.huggingface.co/models/nlptown/bert-base-multilingual-uncased-sentiment", type: "text-classification" }
+            ]
+        }
+    };
+
+    function init() {
+        populatePromptExamples();
+        setupListeners();
+        switchMode(activeMode);
+    }
+    
+    function populatePromptExamples() {
+        for (const mode in taskConfig) {
+            const containerId = `${mode}-examples`;
+            const container = document.getElementById(containerId);
+            if(container) {
+                container.innerHTML = '';
+                taskConfig[mode].examples.forEach(ex => {
+                    const btn = document.createElement('button');
+                    btn.className = 'prompt-example-btn';
+                    btn.textContent = ex.title;
+                    btn.onclick = () => {
+                        const promptTextarea = document.getElementById(`${mode}-prompt`);
+                        promptTextarea.value = ex.prompt;
+                        promptTextarea.focus();
+                        autoGrowTextarea(promptTextarea);
+                    };
+                    container.appendChild(btn);
+                });
+            }
+        }
+    }
+    
+    function setupListeners() {
+        navItems.forEach(item => item.addEventListener('click', () => switchMode(item.dataset.target)));
+        actionButtons.forEach(btn => btn.addEventListener('click', handleAction));
+        newChatBtn.addEventListener('click', startNewChat);
+
+        tempSlider.addEventListener('input', (e) => {
+            temperature = parseFloat(e.target.value);
+            tempValue.textContent = temperature.toFixed(1);
+        });
+        topPSlider.addEventListener('input', (e) => {
+            topP = parseFloat(e.target.value);
+            topPValue.textContent = topP.toFixed(1);
+        });
+
+        document.querySelectorAll('textarea').forEach(textarea => {
+            textarea.addEventListener('input', () => autoGrowTextarea(textarea));
+        });
+
+        setupImageUploader();
+    }
+    
+    function setupImageUploader() {
+        const uploaderInput = document.getElementById('image-upload-input');
+        imageUploader.addEventListener('click', () => uploaderInput.click());
+        imageUploader.addEventListener('dragover', (e) => { e.preventDefault(); imageUploader.style.borderColor = 'var(--accent-color)'; });
+        imageUploader.addEventListener('dragleave', (e) => { imageUploader.style.borderColor = 'var(--border-color)'; });
+        imageUploader.addEventListener('drop', (e) => {
+            e.preventDefault();
+            imageUploader.style.borderColor = 'var(--border-color)';
+            if (e.dataTransfer.files.length > 0) handleImageFile(e.dataTransfer.files[0]);
+        });
+        uploaderInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) handleImageFile(e.target.files[0]);
+        });
+    }
+
+    function autoGrowTextarea(element) {
+        element.style.height = 'auto';
+        element.style.height = (element.scrollHeight) + 'px';
+    }
+    
+    function switchMode(targetMode) {
+        activeMode = targetMode;
+        navItems.forEach(i => i.classList.toggle('active', i.dataset.target === targetMode));
+        promptViews.forEach(v => {
+            v.classList.toggle('active', v.id === targetMode)
+            v.style.display = v.id === targetMode ? 'flex' : 'none';
+        });
         
-            div[data-testid="stMarkdownContainer"] p {{
-                font-family: "Times New Roman" !important; /* Elegant font for title */
-                color:black !important;
-                
-            }}
-    .titles{{
-        margin-top:-90px !important;
-        margin-left:40px;
-        text-align:center;
-        align-items:center;
+        renderModelList(targetMode);
         
-        font-family: "Times New Roman" !important; 
-
-    }}
-        .header {{
-                align-items: center;
-                gap: 20px;  /* Optional: adds space between image and text */
-            }}
-            
-        /* Title styling */
-    .header h1{{
-        font-size: 5rem;
-        font-weight: bold;
-        margin-left: 5px;
-    /* margin-top:-50px;*/
-        margin-bottom:30px;
-        padding: 0;
-        color: black; /* Neutral color for text */
-        }}
-        .header h1 span{{
-        font-size: 6rem;
-        font-weight: bold;
-        margin-left: 5px;
-    /* margin-top:-50px;*/
-        margin-bottom:30px;
-        background: orange;
-        padding:5px;
-        border-radius:15px ;
-        color: black; /* Neutral color for text */
-        }}
-    .titles .content{{
-    font-family: "Times New Roman" !important; /* Elegant font for title */
-        font-size: 1.1rem;
-        margin-bottom:1px;
-        padding: 0;
-        color:black; /* Neutral color for text */
-        }}
-   
-
-
-        </style>
+        if (activeChatId) {
+            chatSessions[activeChatId].mode = targetMode;
+        }
+    }
     
-        """,
-        unsafe_allow_html=True,
-    )
-    # Overlay container
-    st.markdown(
-        f"""
-        <style>
-            .logo-text-containers {{
-                position: absolute;
-                top: -60px;
-                right: 40px;
-                background-color: rgba(255, 255, 255, 0.9);
-                padding: 15px;
-                border-radius: 12px;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-                z-index: 10;
-                width:80vw;
-                height:620px;
-            }}
-            .logo-text-containers img {{
-                height: 40px;
-            right:0;
-            }}
-            .logo-text-containers h1 {{
-                display: inline;
-                font-size: 20px;
-                vertical-align: middle;
-            }}
-            .logo-text-containers i {{
-                display: block;
-                margin-top: 5px;
-                font-size: 14px;
-                color: #333;
-            }}
+    function renderModelList(mode) {
+        modelList.innerHTML = '';
+        const models = taskConfig[mode].models;
+        if (!models || models.length === 0) return;
+        
+        setActiveModel(models[0]);
+        
+        models.forEach(model => {
+            const item = document.createElement('li');
+            item.className = 'model-item';
+            item.textContent = model.name;
+            item.title = model.id;
+            item.dataset.modelId = model.id;
             
-        div[class*="st-key-try"] >div>button > div >p{{
-                top: 5px;
-                font-size: 30px !important;
-                font-weight: bold !important;
-                cursor: pointer;
-                color:orange !important;
-                z-index:1000;
-            }}
-            div[class*="st-key-try"] >div>button {{
-            height:70px !important;
-            width:250px !important;
-            background: rgba(255, 255, 255, 0.2) !important;
-            backdrop-filter: blur(10px) !important;
-            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
-         margin-left:20px;
-
-
-
-            }}
-        [class*="st-key-close-btn"]:hover {{
-                color: #f00;
-            }}
-        [class*="st-key-divider-col"] {{
-                border-left: 3px solid rgba(255, 255, 155, 0.5); /* Light border */
-                border-radius: 35px; /* Rounded corners */
-                margin-top:-15px;
-                margin-left:3px;
-
-            }}
-            [class*="st-key-col1"] {{
-                border-right: 3px solid rgba(255, 255, 155, 0.5); /* Light border */
-                border-radius: 35px; /* Rounded corners */
-                margin-left:20px;
-                margin-top:-15px;
-
-            }}
-
-        [class*="st-key-logo-text-containers"] {{
-            margin: 10px; /* Set a margin inside the container */
-            max-width: 100%;
-            overflow: hidden;
+            if (model.isGroq) {
+                item.classList.add('groq-model');
+            }
+            if (model.id === activeModelInfo.id) {
+                item.classList.add('active');
+            }
+            
+            item.onclick = () => {
+                setActiveModel(model);
+                document.querySelectorAll('.model-item').forEach(i => i.classList.remove('active'));
+                item.classList.add('active');
+            };
+            
+            modelList.appendChild(item);
+        });
+    }
 
-                position: absolute;
-            top:-43px;
-            left:10px;
-            overflow: hidden;
-                background-color: tansparent;
-                padding: 15px;
-                border-radius: 30px;
-                padding-right:40px;
-                z-index: 1;
-                width:88vw;
-                height:660px;
-            /* Glass effect background */
-                background: rgba(255, 255, 255, 0.15);
-                backdrop-filter: blur(12px);
-                -webkit-backdrop-filter: blur(12px);
-                /* Shiny blue borders (left & right) */
-                border-left: 3px solid rgba(255, 255, 255, 0.9); /* Light border */
-                border-right: 3px solid rgba(255, 255, 255, 0.9); /* Light border */
-
-
-                    }}
+    function setActiveModel(model) {
+        activeModelInfo = model;
+    }
+    
+    function startNewChat() {
+        editingMessageId = null;
+        const newChatId = `chat_${Date.now()}`;
+        activeChatId = newChatId;
         
-            @media (max-width: 768px) {{
-        .logo-text-container h1 {{
-            font-size: 12px;
-            
-        }}
-    .logo-text-container i {{
-            font-size: 10px;
-            ma
-        }}
+        chatSessions[newChatId] = {
+            id: newChatId,
+            title: "New Chat",
+            mode: activeMode,
+            messages: []
+        };
+        
+        chatHistoryDisplay.innerHTML = '';
+        renderChatHistory();
+        homeScreen.classList.remove('active');
+        homeScreen.style.display = 'none';
+        chatView.style.display = 'flex';
+        switchMode(activeMode);
+        resetImageUploader();
+    }
     
+    function loadChat(chatId) {
+        editingMessageId = null;
+        activeChatId = chatId;
+        const chat = chatSessions[chatId];
+        
+        chatHistoryDisplay.innerHTML = '';
         
-        .logo-text-container img {{
-                width: 30px; /* Adjust logo size */
-                border-radius: 10px; /* Optional: round edges */
-                margin-left:15px;
-                margin-top: -35px;
+        chat.messages.forEach(msg => {
+            displayMessage(msg.id, msg.sender, msg.content, msg.isHtml, msg.isError);
+        });
+
+        homeScreen.classList.remove('active');
+        homeScreen.style.display = 'none';
+        chatView.style.display = 'flex';
+        switchMode(chat.mode);
+        renderChatHistory(); 
+    }
+    
+    function renderChatHistory() {
+        chatHistoryList.innerHTML = '';
+        Object.values(chatSessions).reverse().forEach(chat => {
+            const item = document.createElement('div');
+            item.className = 'history-item';
+            item.textContent = chat.title;
+            item.dataset.chatId = chat.id;
+            if(chat.id === activeChatId) {
+                item.classList.add('active');
+            }
+            item.onclick = () => loadChat(chat.id);
+            chatHistoryList.appendChild(item);
+        });
+    }
 
-            }}
+    function handleImageFile(file) {
+        if (!file.type.startsWith('image/')) return;
+        
+        imageUploader.classList.remove('has-image');
+        imageUploader.classList.add('loading');
+        
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            uploadedImageDataUrl = e.target.result;
+            uploadedImageBase64 = uploadedImageDataUrl.split(',')[1];
             
-    }}
-        </style>
-    """,
-        unsafe_allow_html=True,
-    )
-
-
-    st.markdown(
-        f""" <div class="logo-text-container">
-        <img src="data:image/png;base64,{base64.b64encode(open("hugging.png","rb").read()).decode()}" alt="Uploaded Image">
-    <h1>Hugging face<br></h1>
-    <i>transformers pipeline</i>
-    </div>
-
-    """,
-        unsafe_allow_html=True,
-    )
-
-
-    st.markdown(
-        f""" <div class="titles">
-                <div class = "header">
-                <h1></br><span>Frame the </span> Prompt </br> Where Words Become Art
-    </h1>
-                </div> 
-                <div class="content">
-            This intelligent assistant enables you to generate insightful text and vivid imagery description from simple prompts.
-    Whether you're brainstorming ideas, <br>drafting content, or visualizing concepts — everything is saved, so your creative flow never skips a beat.
-                    </div>
-                    </div>
-                            """,
-        unsafe_allow_html=True,
-    )
-
-
-    with st.container(key="content-container-3"):
-            if st.button("Try it now ",key="try"):
-                st.session_state.framework = "dash"
-                st.session_state.show_overlay = True
-                st.rerun()
-
-if st.session_state.framework == "dash":
-    if st.session_state.menu == "class":
-        choice1 = '"Win a free vacation to the Bahamas! Click the link below to claim your prize.This is an exclusive offer for a limited time only, don’t miss out!"'
-        choice2 = '"I can’t believe my phone just died right before an important call. Ugh! Now I have to wait for hours to get it fixed and miss out on everything."'
-
-        choice3 = '"Apple unveils a new AI chip with groundbreaking technology in the latest iPhone.This innovation is set to redefine the way we use smartphones in everyday life."'
-
-        choice4 = '"I made a delicious homemade food last night with fresh ingredients. It was so good, I can’t wait to make it again for dinner tomorrow."'
-
-        text_h1 = "🏷️ Text Classification"
-        images="images.png"
-        images="images.png"
-        image1 = 'images.png'
-        image2 = 'images.png'
-        image3 = 'images.png'
-        margin = 0
-        margintop = "-20"
-        display = "none"
-        st.session_state.models = [
-    {
-        "model": "distilbert-base-uncased-finetuned-sst-2-english",
-        "url": "https://router.huggingface.co/hf-inference/models/distilbert/distilbert-base-uncased-finetuned-sst-2-english"
-    },
-    {
-        "model": "openai-community/roberta-base-openai-detector",
-        "url": "https://router.huggingface.co/hf-inference/models/openai-community/roberta-base-openai-detector"
-    },
-    {
-        "model": "nlptown/bert-base-multilingual-uncased-sentiment",
-        "url": "https://router.huggingface.co/hf-inference/models/nlptown/bert-base-multilingual-uncased-sentiment"
-    },
-    {
-        "model": "BAAI/bge-reranker-base",
-        "url": "https://router.huggingface.co/hf-inference/models/BAAI/bge-reranker-base"
-    },
-    {
-        "model": "SamLowe/roberta-base-go_emotions",
-        "url": "https://router.huggingface.co/hf-inference/models/SamLowe/roberta-base-go_emotions"
+            imagePreview.src = uploadedImageDataUrl;
+            imageUploader.classList.remove('loading');
+            imageUploader.classList.add('has-image');
+            document.querySelector('#image-to-text .action-button').disabled = false;
+        }
+        reader.readAsDataURL(file);
     }
-]
-
-        task =  "text-classification"
-    if st.session_state.menu == "gen":
-        choice1 = 'Write a poem about the ocean at night. Include imagery and emotion to bring it to life.'
-        choice2 = 'Generate a product description for a futuristic smartwatch with health monitoring features.'
-        choice3 = 'Complete this sentence: "As she opened the old journal, she found..."'
-        choice4 = 'Write a motivational quote that could be used in a fitness app.'
-        text_h1 = "✍️ Text Generation"
-        images =  'images.png'
-        image1 = 'images.png'
-        image2 = 'images.png'
-        image3 = 'images.png'
-        margin = 0
-        margintop = -20
-        task = "text-generation"
-        display = "block"
-
-        st.session_state.models = [
-    {
-        "model": "deepseek-ai/DeepSeek-V3",
-        "url": "https://router.huggingface.co/nebius/v1/chat/completions"
-    },
-    {
-        "model": "mistralai/mistral-7b-instruct",
-        "url": "https://router.huggingface.co/novita/v3/openai/chat/completions"
-    },
-    {
-        "model": "meta-llama/llama-3.1-8b-instruct",
-        "url":"https://router.huggingface.co/novita/v3/openai/chat/completions"
-    },
-    {
-        "model": "qwen/qwq-32b",
-        "url": "https://router.huggingface.co/novita/v3/openai/chat/completions"
-    },
-    {
-        "model": "google/gemma-2-2b-it-fast",
-        "url": "https://router.huggingface.co/nebius/v1/chat/completions"
+    
+    function resetImageUploader() {
+        imageUploader.classList.remove('has-image', 'loading');
+        imagePreview.src = '';
+        uploadedImageDataUrl = null;
+        uploadedImageBase64 = null;
+        document.querySelector('#image-to-text .action-button').disabled = true;
     }
-]
-        st.session_state.model = "best_bilstm_model.h5"
-    if st.session_state.menu == "image":
-        choice1 = ''
-        choice2 = ''
-        choice3 = ''
-        choice4 = ''
-        text_h1 = "🖼️ Image to Text "
-        images = 'images.jfif'
-        image1 = 'logo2.png'
-        image2 = 'hugging.png'
-        margintop = -90
-        image3 = 'Captured.png'
-        display = "none"
-
-        st.session_state.models = [
-    {
-        "model": "Salesforce/blip-image-captioning-large",
-        "url": "https://router.huggingface.co/hf-inference/models/Salesforce/blip-image-captioning-large"
-    },
-    {
-        "model": "nlpconnect/vit-gpt2-image-captioning",
-        "url": "https://router.huggingface.co/hf-inference/models/nlpconnect/vit-gpt2-image-captioning"
+    
+    function addMessageToSession(sender, content, isHtml = false, isError = false) {
+        if (!activeChatId) return;
+        const messageId = `msg_${Date.now()}`;
+        const message = { id: messageId, sender, content, isHtml, isError };
+        chatSessions[activeChatId].messages.push(message);
+        return messageId;
     }
-]
-        task =  "image-to-text"
 
-        margin = 120
-    st.session_state.model = "best_bilstm_model.h5"
-    st.markdown(
-    """
-    <style>
-    section[data-testid="stSidebar"] {
-        scrollbar-width: thin;
-        scrollbar-color: #888 #f1f1f1;
-    }
-    section[data-testid="stSidebar"] ::-webkit-scrollbar {
-        width: 4px;
+    // UPDATED: displayMessage to include edit/resend and message IDs
+    function displayMessage(messageId, sender, content, isHtml = false, isError = false) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `chat-message ${sender}`;
+        messageDiv.id = messageId;
+        if(isError) { messageDiv.classList.add('error'); }
+
+        const avatar = `<div class="chat-avatar"><span class="material-icons">${sender === 'user' ? 'person' : 'auto_awesome'}</span></div>`;
+        
+        let messageContentHtml = '';
+        if (sender === 'user') {
+             // Add action buttons for user messages
+            const actions = `
+                <div class="message-actions">
+                    <div class="action-icon" onclick="editMessage('${messageId}')" title="Edit"><span class="material-icons">edit</span></div>
+                    <div class="action-icon" onclick="resendMessage('${messageId}')" title="Resend"><span class="material-icons">replay</span></div>
+                </div>`;
+            messageContentHtml += actions;
+        }
+
+        const bubble = document.createElement('div');
+        bubble.className = 'chat-bubble';
+        
+        if (isHtml) {
+            bubble.innerHTML = content;
+        } else {
+            bubble.textContent = content;
+        }
+
+        messageContentHtml += bubble.outerHTML;
+
+        if (sender === 'user') {
+            messageDiv.innerHTML = messageContentHtml + avatar;
+        } else {
+            messageDiv.innerHTML = avatar + messageContentHtml;
+        }
+        
+        chatHistoryDisplay.appendChild(messageDiv);
+        chatHistoryDisplay.scrollTop = chatHistoryDisplay.scrollHeight;
+        return messageDiv;
     }
-    section[data-testid="stSidebar"] ::-webkit-scrollbar-thumb {
-        background-color: #888;
-        border-radius: 10px;
+    
+    // ADDED: streamResponse for typing effect
+    function streamResponse(element, text, speed = 10) {
+        let i = 0;
+        element.innerHTML = ''; // Clear the '...'
+        const interval = setInterval(() => {
+            if (i < text.length) {
+                element.innerHTML += text.charAt(i);
+                i++;
+                chatHistoryDisplay.scrollTop = chatHistoryDisplay.scrollHeight;
+            } else {
+                clearInterval(interval);
+            }
+        }, speed);
     }
-    </style>
-    """,
-    unsafe_allow_html=True
-)
 
-    st.markdown(
-    f"""
-    <style>
-        /* Sidebar styling */
-        section[data-testid="stSidebar"][aria-expanded="true"] {{
-            margin-top: 0px !important; /* Space for the logo */
-            width: 300px !important; /* Sidebar width */
-           /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
-           /* border: 1px solid #FFD700; /* Shiny golden border */
-            margin-bottom: 1px  !important;
-            color:white !important;
-              white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    window.editMessage = (messageId) => {
+        const chat = chatSessions[activeChatId];
+        if (!chat) return;
+        const message = chat.messages.find(m => m.id === messageId);
+        if (!message) return;
+
+        const promptTextarea = document.getElementById(`${activeMode}-prompt`);
+        // We need to strip HTML for editing. A simple way for this app:
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = message.content;
+        promptTextarea.value = tempDiv.textContent || "";
+        promptTextarea.focus();
+        editingMessageId = messageId; // Set the message to be replaced
+    };
+
+    window.resendMessage = (messageId) => {
+        const chat = chatSessions[activeChatId];
+        if (!chat) return;
+        const message = chat.messages.find(m => m.id === messageId);
+        if (!message) return;
+        
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = message.content;
+        
+        handleAction(null, tempDiv.textContent || ""); // Resend the original text content
+    };
+    
+    function createModelResponseHeader() {
+        return `
+            <div class="model-response-header">
+                <span class="material-icons">memory</span>
+                <span>${activeModelInfo.name}</span> |
+                <span>Temp: ${temperature.toFixed(1)}</span> |
+                <span>Top-P: ${topP.toFixed(1)}</span>
+            </div>
+        `;
+    }
 
-            background:#f9f9f9;
+    // UPDATED: handleAction to support editing and resending
+    async function handleAction(e, overridePrompt = null) {
+        const targetMode = e ? e.currentTarget.dataset.target : activeMode;
+        if (activeMode !== targetMode) return;
+        
+        if (!activeChatId) { startNewChat(); }
 
-        }}
-        *, html {{scroll-behavior: smooth !important;}}
+        const isGroqModel = activeModelInfo.isGroq;
+        const apiKey = isGroqModel ? groqTokenInput.value.trim() : hfTokenInput.value.trim();
+        const apiKeyName = isGroqModel ? "Groq API Key" : "Hugging Face API Token";
 
-        div[data-testid="stSidebarContent"]{{
-         overflow-x:hidden !important;
+        if (!apiKey) {
+            displayMessage(null, 'model', `Please enter your ${apiKeyName}.`, false, true);
+            return;
+        }
 
+        const promptTextarea = document.getElementById(`${targetMode}-prompt`);
+        let prompt = overridePrompt !== null ? overridePrompt : promptTextarea?.value.trim() || '';
 
-        }}
-         /* Style for the upload button */
-        [class*="st-key-upload-btn"] {{
-             top: -31px; /* Position from the top of the inner circle */
-            left: 150px; /* Position horizontally at the center */
-            padding: 10px 20px;
-            color: red;
-            border: none;
-            border-radius: 15px;
-            cursor: pointer;
-            font-size: 35px !important;
-            z-index:10000000;
-            width:300px;
-        }}
-        [class*="st-key-upload-btns"] {{
-             top: 106px; /* Position from the top of the inner circle */
-            left: 390px; /* Position horizontally at the center */
-            padding: 10px 20px;
-            color: red;
-            border: none;
-            border-radius: 10px;
-            cursor: pointer;
-            font-size: 35px !important;
-            z-index:10000000000000000000000;
-            width:300px;
-        }}
-
-        .upload-btn:hover {{
-            background-color: rgba(0, 123, 255, 1);
-        }}
-          div[data-testid="stFileUploader"] label > div > p {{
-            display:none;
-            color:white !important;
-        }}
-        div[data-testid="stFileUploader"] > div  {{
-            color:blue !important;
-            margin-top:-110px;
-            margin-left:150px;
-            width:300px;
-            height:110px;
-        }}
-       
-        section[data-testid="stFileUploaderDropzone"] {{
-          width:900px;
-        height: 120px;
-        border-radius: 30px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-top:-10px;
-        margin:20px;
-        background-color:#f0f2f6; /* Transparent blue background */
-        color:white;
-        }}
-        div[data-testid="stFileUploaderDropzoneInstructions"] div > small{{
-           color:white !important;
-           display:none;
-        }}
-         div[data-testid="stFileUploaderDropzoneInstructions"] span{{
-          margin-left:65px;
-          color:black;
-        }}
-        div[data-testid="stFileUploaderDropzoneInstructions"] div{{
-          display:none;
-        }}
-       section[data-testid="stFileUploaderDropzone"] button{{
-        display:none;
-       }}
-     
-         div[data-testid="stMarkdownContainer"] p {{
-            font-family: "Times New Roman" !important; /* Elegant font for title */
-            color:black !important;
-        }}
-         div[class*="st-key-user-"]{{
-             margin-left:510px;
-             width:550px;
-             
-         }}
-         div[class*="st-key-assistant-"]{{
-             margin-left:100px;
-             
-         }}
-         
-        .highlight {{
-        border: 4px solid lime;
-        font-weight: bold;
-        background: radial-gradient(circle, rgba(0,255,0,0.3) 0%, rgba(0,0,0,0) 70%);
-        box-shadow: 0px 0px 30px 10px rgba(0, 255, 0, 0.9), 
-                    0px 0px 60px 20px rgba(0, 255, 0, 0.6), 
-                    inset 0px 0px 15px rgba(0, 255, 0, 0.8);
-        transition: all 0.3s ease-in-out;
-            
-        }}
-        .highlight:hover {{
-        transform: scale(1.05);
-        background: radial-gradient(circle, rgba(0,255,0,0.6) 0%, rgba(0,0,0,0) 80%);
-        box-shadow: 0px 0px 40px 15px rgba(0, 255, 0, 1), 
-                    0px 0px 70px 30px rgba(0, 255, 0, 0.7), 
-                    inset 0px 0px 20px rgba(0, 255, 0, 1);
-    }}
-         header[data-testid="stHeader"] {{
-           /* border-radius: 1px !important;*/
-           background: white !important; /* Gradient background */
-            /*: 3px solid #FFD700; /* Shiny golden border */
-            /*border-bottom:none !important;*/
-           margin-right: 300px !important;
-            margin-top: 12.5px !important;
-            border-bottom:1px solid #ccc;
-            width:48%;
-            height:85px;
-            margin-left:770px;
-            z-index:1000000;
-            
+        if (targetMode === 'image-to-text' && !uploadedImageBase64 && !editingMessageId) {
+             displayMessage(null, 'model', 'Please upload an image first.', false, true); return;
+        }
+        if (!prompt && targetMode !== 'image-to-text') return;
 
-        }}
-         div[data-testid="stDecoration"]{{
-        background-image:none;
-        }}
-         button[data-testid="stBaseButton-secondary"]{{
-        background:transparent;
-        border:none;
-        }}
-        div[data-testid="stApp"]{{
-         background:white;
-        height: 98.9vh;  /* Full viewport height */
-        width: 99%; 
-        border-radius: 10px !important;
-        margin-left:5px;
-        margin-right:10px;
-        margin-top:5px;
-        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
-
-        overflow: hidden;
+        let userMessageContent = prompt;
+        if (targetMode === 'image-to-text') {
+             userMessageContent = `<img src="${uploadedImageDataUrl}" alt="Uploaded preview" style="max-height: 150px; border-radius: 8px; margin-bottom: 8px;">${prompt ? `<br>${prompt}`: ''}`;
+        }
         
-        }}
-        div[data-testid="stChatMessage"]{{
-            z-index:1;
-            border-radius:50px;
-            
-            
-        }}
-        section[data-testid="stAppScrollToBottomContainer"]{{
-            margin-top:50px !important;
-            padding-right:5px !important;
-            margin-right:10px;
-        }}
-        div[data-testid="stChatMessageAvatarUser"]{{
-            display:none;
-        }}
-          div[data-testid="stChatMessageAvatarAssistant"]{{
-            display:none;
-        }}
-        div[data-testid="stChatInput"]{{
-            height:120px !important;            
-        }}
-        div[data-testid="stChatInput"]>div{{
-            max-height:200px !important;            
-        }}
-         div[class*="st-key-upload"] > div[data-testid="stChatInput"]> div > div:nth-child(4) {{
-             top: 85px;
-             right: 50px;
-       }}   
-       
-     div[class*="st-key-upload"] > div[data-testid="stChatInput"] > div > div {{
-            margin-top:10px !important;         
-            height: 0px;
-            width: -0px;   
-        }}
-        div[data-testid ="stSidebarCollapsedControl"]> div > button{{
-         background-image: url(data:image/png;base64,{base64.b64encode(open("close.png", "rb").read()).decode()});
-         background-size: cover; /* size of the image */
-         background-repeat: no-repeat;
-         width:30px !important;
-        margin-left: -15px !important;
-        display: block !important;
-        width: 41px !important;
-        height: 40px;     
-
-        }}
+        if (editingMessageId) {
+            // Find and update the existing message
+            const messageToUpdate = chatSessions[activeChatId].messages.find(m => m.id === editingMessageId);
+            if (messageToUpdate) {
+                messageToUpdate.content = userMessageContent;
+                document.getElementById(editingMessageId).querySelector('.chat-bubble').innerHTML = userMessageContent;
+            }
+        } else {
+            addMessageToSession('user', userMessageContent, true);
+            displayMessage(`msg_${Date.now()}`, 'user', userMessageContent, true);
+        }
         
-   div[data-testid ="stSidebarCollapsedControl"]> div > button > svg{{
-            display:none !important;
-            }}
-    div[data-testid="stSidebarCollapseButton"] > button >svg{{
-              display:none !important;
-     }}
-     div[data-testid="stSidebarCollapseButton"] {{
-              display:block !important;
-     }}
-       div[data-testid ="stSidebarCollapseButton"]> button{{
-         background-image: url(data:image/png;base64,{base64.b64encode(open("close.png", "rb").read()).decode()});
-         background-size: cover; /* size of the image */
-         background-repeat: no-repeat;
-         display:block !important;
-        display: block !important;
-        width: 40px;
-        height: 40px;
-        position:relative;
-        margin-left:-250px !important;
-         margin-top:-20px;
-
-
-     
-
-        }}
-    [class*="st-key-content_1"] {{
-            background: transparent;
-            border-radius: 10px;
-          /*  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);*/
-            width: 90%;
-            margin-left: -100px;
-           /* margin-top: -90px;*/
-            margin-bottom: 20px;
-            margin-right:10px;
-            margin-top:5px !important;
-            padding:100px;
-            overflow-y: auto; /* Enable vertical scrolling for the content */
-            position: fixed; /* Fix the position of the container */
-            top: 1%; /* Adjust top offset */
-            left: 15%; /* Adjust left offset */
-            overflow-x:hidden;
-            overflow-y:hidden;
-             display: flex;
-             
-            z-index:10000;
-
-        }}
+        if (chatSessions[activeChatId].messages.length <= 2 && prompt && !editingMessageId) {
+             chatSessions[activeChatId].title = prompt.substring(0, 25) + (prompt.length > 25 ? '...' : '');
+             renderChatHistory();
+        }
+
+        if(promptTextarea) { promptTextarea.value = ''; autoGrowTextarea(promptTextarea); }
+
+        const typingIndicator = displayMessage(`msg_${Date.now()}`, 'model', '...');
         
- 
-        div[data-testid="stSidebarHeader"]{{
-            height:40px !important;
-            position:fixed;
-            z-index:10000;
-            background:#f9f9f9;
-            width:300px;
-        }}
-         section[data-testid="stMain"]{{
-           margin-left:-70px !important;
-        }}
-    section[data-testid="stSidebar"]{{
-
-
-        background:#f7f7f8;
+        let requestBody;
+        let headers = { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' };
         
-        }}
-        [class*="st-key-center-box"] {{
-
-            background-color: transparent;
-            border-radius: 60px;
-            width: 100%;
-           margin-top:30px;
-            top:20% !important; /* Adjust top offset */
-            left: 1%; /* Adjust left offset */
-
-        }}
-         [class*="st-key-side"] {{
-
-            background-color: transparent;
-            border-radius: 60px;
-           box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
-            width: 5%;
-           /* margin-top: 100px;*/
-            margin-bottom: 10px;
-            margin-right:10px;
-            padding:30px;
-            display: flex;
-            justify-content: center;
-            
-            align-items: center;
-            overflow-y: auto; /* Enable vertical scrolling for the content */
-            position: fixed; /* Fix the position of the container */
-            top: 17%; /* Adjust top offset */
-            left: 16%; /* Adjust left offset */
-            height:50vh;  /* Full viewport height */
-
-        }}
-           
-         [class*="st-key-button_"] .stButton p > img {{
-                max-width: 100%;
-                vertical-align: top;
-                height:130px !important;
-                object-fit: cover;
-                padding: 10px;
-                width:250px !important;
-                border-radius:10px !important;
-                max-height: 2em !important;
-
-       }}
-         div.stButton > button {{                
-      color: orange !important; /* White text */
-        font-family:  "Times New Roman " !important; /* Font */
-        font-size: 18px !important; /* Font size */
-        font-weight: bold !important; /* Bold text */
-        padding: 1px 2px; /* Padding for buttons */
-        border: none; /* Remove border */
-        border-radius: 5px; /* Rounded corners */
-        transition: all 0.3s ease-in-out; /* Smooth transition */
-         display: flex;
-        align-items: left;
-        justify-content: left;
-        margin-left:-15px ;
-        width:200px;
-        height:50px;
-         z-index:1000;
-         text-align: left;       /* Align text to the left */
-        padding-left: 50px;
-      
-    }}
-    div.stButton > button p{{                
-        color: black !important; /* White text */
-
-    }}
-    /* Hover effect */
-    div.stButton > button:hover {{
-            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
-            transform: scale(0.05); /* Slightly enlarge button */
-            transform: scale(1.01); /* Slight zoom on hover */
-            box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4); /* Glow effect */
-    }}
-     div.stButton > button:active {{
-        background: none;
-       
-    }}
-         div.stDownloadButton > button:active,
-        div.stDownloadButton  > buttonfocus {{
-            outline: none; /* Remove the focus outline if you want */
-                }}
-         [class*="st-key-button_"] .stButton p > img {{
-                max-width: 100%;
-                vertical-align: top;
-                height:130px !important;
-                object-fit: cover;
-                padding: 10px;
-                width:250px !important;
-                border-radius:10px !important;
-                max-height: 2em !important;
-
-       }}
-         div.stDownloadButton  > button > div > p {{
-             font-size:15px !important;
-             font-weight:bold;
-         }}
-        [class*="st-key-button_"] .stButton p{{
-        font-family:  "Times New Roman " !important; /* Font */
-        font-size:100px !important;
-        height:150px !important;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-        font-weight: bold;
-        margin-top:5px;
-       margin-left:5px;
-       color:black;
-       border-radius:10px;
-
-       }}
-        [class*="st-key-button_"]:hover {{
-          
-        }}
-
-          [class*="st-key-nav-"] .stButton p{{
-        font-family:  "Times New Roman " !important; /* Font */
-        font-size:1rem !important;
-        font-weight: bold;
-     
-            }}
-        [class*="st-key-create"]>div > button
-        {{
-              background-image: url(data:image/png;base64,{base64.b64encode(open("side.png", "rb").read()).decode()});
-                width: 130px !important;
-                background-size: contain; 
-                background-repeat: no-repeat;
-                margin-top: -88px !important;
-                margin-left: -100px !important;
-                z-index: 100000000000000;
-                pointer-events: auto; /* Ensure the button is clickable */
-                border-radius:0px;
-
-
-             }}
-     
-             
-              .user-image{{
-                height:100px ;
-                margin:20px;
-                 }}
-
-             /******************************************************/
-             /* *              *choices*************/
-             
-             
-             
-            
-              [class*="st-key-choices"]{{
-                  margin-left:220px;
-                  padding:30px;
-                  margin-top:{margintop}px !important;
-               
-              }}
-                [class*="st-key-choice-1"]{{
-                  background:white !important;
-                  border-radius:15px; 
-                  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-                width:350px;
-
-               
-              }}
-               [class*="st-key-choice-1"]>div >button{{
-                  
-                background-image: url(data:image/png;base64,{base64.b64encode(open(images, "rb").read()).decode()}) !important;
-                background-size: 100% 100%;
-                background-repeat: no-repeat;
-                background-position:center;
-
-             
-              }}
-            [class*="st-key-choice-1"]>div >button p{{
-                margin-left:{margin}px !important;
-              }}
-              [class*="st-key-choice-"]>div >button p{{
-                margin-right:10px !important;
-              }}
-                [class*="st-key-choice-2"]>div >button{{
-                  
-                background-image: url(data:image/png;base64,{base64.b64encode(open(image1, "rb").read()).decode()}) !important;
-                background-repeat: no-repeat;
-                background-position:center;
-                background-size: contain;
-             
-              }}
-            [class*="st-key-choice-2"]>div >button p{{
-                margin-left:{margin}px !important;
-              }}
-            [class*="st-key-choice-5"]>div >button{{ 
-                background-image: url(data:image/png;base64,{base64.b64encode(open(image2, "rb").read()).decode()}) !important;
-                background-size: contain; 
-                background-position:center;
-                background-repeat: no-repeat;
-             
-              }}
-            [class*="st-key-choice-5"]>div >button p{{
-                margin-left:{margin}px !important;
-              }}
-                [class*="st-key-choice-6"]>div >button{{
-                  
-                background-image: url(data:image/png;base64,{base64.b64encode(open(image3, "rb").read()).decode()}) !important;
-                background-size: contain; 
-                background-position:center;
-
-                background-repeat: no-repeat;
-             
-              }}
-            [class*="st-key-choice-6"]>div >button p{{
-                margin-left:{margin}px !important;
-              }}
-             [class*="st-key-choice-"] > div.stButton > button{{ 
-             padding-left: 25px !important;
-            height: 130px !important;
-              margin-left: 0px !important;
-              max-width: 400px;
-            width: 350px;
-             
-             }}
-                [class*="st-key-choice-2"]{{
-                   background:white !important;
-                  border-radius:15px; 
-                  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-                width:350px;
-             
-              }}
-              
-               [class*="st-key-choice-5"]{{
-                  background:white !important;
-                  border-radius:15px; 
-                  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-                width:350px;
-                
-             
-              }}
-               [class*="st-key-choice-6"]{{
-                    background:white !important;
-                  border-radius:15px; 
-                  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-                width:350px;
-                
-             
-              }}
-              
-              /*************************************************************/
-              div[data-testid="stSelectbox"]
-        {{
-                width: 297px !important;
-                background-color: white !important; 
-                margin-top: -118px !important;
-                position: relative;
-                margin-left: -8px !important;
-                z-index:10000000000000000000;
-                position:fixed;
-                border-bottom:1px solid #ccc;
-                border-radius:0px;
-                height:87px;
-                padding:15px;
-                padding-left:100px;
-
-                
-
-             }}
-            div[data-testid="stExpander"]
-        {{
-                width: 250px !important;
-                background-color: white !important; 
-                margin-top: -102px !important;
-                position: relative;
-                margin-left: 289px !important;
-                z-index:10000000000000000000;
-                position:fixed;
-                border-bottom:1px solid #ccc;
-                border-radius:0px;
-                height:87px;
-                padding-top:35px;
-                padding-left:10px;
-
-=                
-
-             }}
-             div[data-testid="stExpander"]>details{{
-               z-index:10000000000000000000;
-
-              display:{display} !important;
-        background:white;
-        }}
-         div[data-testid="stTextInput"]
-        {{
-                background-color: transparent;  /* White background */
-                z-index:100000000;
-                margin-top: -10px !important;
-                margin-left: 200px !important;
-            }}
-            
-              div[data-testid="stHeading"]
-        {{
-              
-                margin-top: 10px !important;
-                position: relative;
-                margin-left: 300px !important;
-            }}
-              
-            
-         div[data-testid="stTextInput"]>div
-        {{
-             width: 900px;                /* Full width inside the container */
-                z-index:10000000000000000;
-               height:120px;
-               border-radius:30px;
-               border:0.5px solid white;
-
-            }}
-             
-        [class*="st-key-btn-new"]>div > button{{
-            width:40px !important;
-            margin-top:{top}% !important;
-            margin-left:{left}% !important;
-            z-index:1000000000000;
-            background-image: url(data:image/png;base64,{base64.b64encode(open("side.png", "rb").read()).decode()});
-            background-size: contain; /* size of the image */
-            background-repeat: no-repeat;
-            position:fixed;
-
-            }}
-             [class*="st-key-input-base"]>div{{
-                 z-index:1000000000000000;
-
-
-             }}
-            [class*="st-key-base-content"]>div{{
-                 background:transparent !important;
-                 z-index:1000000000000000;
-                margin-top: 440px !important;
-                position:fixed;
-
-
-             }}
-        [class*="st-key-answers"]{{
-                height:200px !important;
-                overflow-y:scroll;
-                overflow-x:hidden;
-                scroll-behavior: smooth !important;
-                max-height:300px;
-
-             }}
-            [class*="st-key-uploads"]{{
-                margin:50px;
-                margin-top: 10px;
-                margin-left: 150px;
-                margin-bottom:80px;
-            }}
-             [class*="st-key-imupload"]{{
-              
-                margin-left: 150px;
-            }}
-             
-         [class*="st-key---hist_"]{{
-             margin-top:-20px !important;
-             margin-left:-30px;
-             
-         }}
-          [class*="st-key---hist_"]>div >button p{{
-             margin-top:-20px !important;
-             font-size:16px;
-            font-family: "Times New Roman" !important; /* Elegant font for title */
-            color:black !important;
+        if (targetMode === 'image-to-text') {
+        if (isGroqModel) {
+            const payload = {
+                model: activeModelInfo.id,
+                 messages: [
+                    {
+                        role: "user",
+                        content: [
+                        {
+                            type: "text",
+                            text: prompt
+                        },
+                        {
+                            type: "image_url",
+                            image_url: { url: uploadedImageDataUrl }
+                        }
+                        ]
+                    }
+                    ],
+                temperature,
+                max_tokens: 1024,
+                stream: false
+            };
+            requestBody = JSON.stringify(payload);
+        } else {
+            // Fallback to HF blob-based logic
+            const res = await fetch(uploadedImageDataUrl);
+            requestBody = await res.blob();
+            headers['Content-Type'] = requestBody.type;
+        }
+    } else {
+             let payload;
+            if (isGroqModel) {
+                payload = { model: activeModelInfo.id, messages: [{"role": "user", "content": prompt}], temperature, top_p: topP, max_tokens: 1024, stream: false };
+            } else if (targetMode === 'text-generation') {
+                payload = { model: activeModelInfo.id, messages: [{"role": "user", "content": prompt}], temperature, top_p: topP };
+            } else { // text-classification
+                payload = { inputs: prompt };
+            }
+            requestBody = JSON.stringify(payload);
+        }
+
+        try {
+            const response = await fetch(activeModelInfo.url, { method: 'POST', headers: headers, body: requestBody });
+            const resultText = await response.text();
             
-             
-         }}
-           [class*="st-key---hist_"]>div >button {{
-                padding-left:15px;
-                width:300px !important;
-                text-overflow: ellipsis;
-
-         }}
-      [class*="st-key-hist_"]{{
-            overflow:hidden;
-    text-overflow: ellipsis;
-    max-width: 300px;
-    margin-left:-35px;
-      }}
-      h3{{
-                color:black !important;
-                font-family: "Times New Roman" !important; /* Elegant font for title */
-                font-size:18px;
-
-            }}
-         
-          [class*="st-key-nav-"]>div >button{{
-              width:350px !important;
-              height:20px !important;
-              }}
-            [class*="st-key-nav-"]{{
-             margin-left:-20px !important;
-              }}
-
-
-        [class*="st-key-nav-1"]{{
-                  
-           border-radius:80px !important;
-             border-radius:80px !important;
-            width:280px !important;
-             margin-top:50px !important;
-            background-image: url(data:image/png;base64,{base64.b64encode(open("img.png", "rb").read()).decode()});
-            background-size: contain; /* size of the image */
-           background-repeat: no-repeat;
-            color :black !important;
-            padding:10px;
-            padding-left:25px;
-         
-            }}
-             [class*="st-key-nav-2"] .stButton p{{
-                 margin-left:-10px !important;
-                 }}
-              [class*="st-key-nav-2"]{{
-
-           border-radius:80px !important;
-             border-radius:80px !important;
-            width:280px !important;
-             margin-top:-20px !important;
-            background-image: url(data:image/png;base64,{base64.b64encode(open("side.png", "rb").read()).decode()});
-            background-size: contain; /* size of the image */
-           background-repeat: no-repeat;
-            color :black !important;
-            padding:10px;
-            margin-left:-10px !important;
-            padding-left:25px;
-         
-            }}
-              [class*="st-key-nav-3"]{{
-
-            border-radius:80px !important;
-             border-radius:80px !important;
-            width:280px !important;
-             margin-top:-22px !important;
-            background-image: url(data:image/png;base64,{base64.b64encode(open("gen.png", "rb").read()).decode()});
-            background-size: contain; /* size of the image */
-           background-repeat: no-repeat;
-            color :black !important;
-            padding:10px;
-            padding-left:20px;
-            margin-left:-10px !important;
-            height:51px !important;
-         
-            }}
-               [class*="st-key-nav-6"] {{
-                  
-            border: none; /* Remove border */
-            background: transparent !important;
-            border-radius:80px !important;
-            backdrop-filter: blur(10px) !important;
-             border-radius:80px !important;
-            width:190px !important;
-             margin-top:35px !important;
-
-            }}
+            if (!response.ok) {
+                try {
+                    const errorJson = JSON.parse(resultText);
+                    throw new Error(errorJson.error?.message || errorJson.error || resultText);
+                } catch(e) { throw new Error(resultText); }
+            }
+
+            let responseContent = '';
+            const finalResponse = JSON.parse(resultText);
             
+           switch (targetMode) {
+            case 'text-generation':
+                responseContent = finalResponse.choices?.[0]?.message?.content || '[No content]';
+                break;
+
+            case 'image-to-text':
+                if (isGroqModel) {
+                // Groq returns choices array, just like OpenAI
+                responseContent = finalResponse.choices?.[0]?.message?.content || '[No image caption]';
+                } else {
+                // Hugging Face image-to-text returns an array
+                responseContent = finalResponse?.[0]?.generated_text || '[No image caption]';
+                }
+                break;
+
+            case 'text-classification':
+                responseContent = `<pre style="background:var(--bg-color-dark); padding: 12px; border-radius: 8px;">${JSON.stringify(finalResponse, null, 2)}</pre>`;
+                responseHtml = true;
+                break;
+            }
+            const responseHeader = createModelResponseHeader();
+            const fullResponseHtml = responseHeader + `<div class="response-content"></div>`;
+            await fetch("http://localhost:5001/log", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+            prompt,
+            model: activeModelInfo.id,
+            response: fullResponseHtml
+            })
+        });
+            // Update typing indicator with the header and prepare for streaming
+            typingIndicator.querySelector('.chat-bubble').innerHTML = fullResponseHtml;
+            const responseContentEl = typingIndicator.querySelector('.response-content');
             
-        </style>
-        """,
-        unsafe_allow_html=True
-    )
-    loading_html = """
-    <style>
-    .loader {
-    border: 8px solid #f3f3f3;
-    border-top: 8px solid #0175C2; /* Blue color */
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    animation: spin 1s linear infinite;
-    margin: auto;
-    }
-    @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+            if (targetMode === 'text-classification') {
+                responseContentEl.innerHTML = responseContent; // No streaming for formatted JSON
+            } else {
+                streamResponse(responseContentEl, responseContent);
+            }
+            addMessageToSession('model', fullResponseHtml, true);
+
+
+        } catch (error) {
+            const errorMessage = `Error: ${error.message}`;
+            typingIndicator.querySelector('.chat-bubble').textContent = errorMessage;
+            typingIndicator.classList.add('error');
+            addMessageToSession('model', errorMessage, false, true);
+        } finally {
+            if (targetMode === 'image-to-text') { resetImageUploader(); }
+            editingMessageId = null; // Clear editing state
+        }
     }
 
-    </style>
-    <div class="loader"></div>
-    """
-# Sort chat files by last modified time (most recent first)
-    chat_files = sorted(
-        os.listdir(CHAT_DIR),
-        key=lambda x: os.path.getmtime(os.path.join(CHAT_DIR, x)),
-        reverse=True
-    )
-
- # Sidebar buttons
-    with st.sidebar:
-        if st.button(" &nbsp;&nbsp; Text Classification",key="nav-1"):
-                st.session_state.menu ="class"  # Store state
-                st.rerun()
-        if st.button(" &nbsp;&nbsp; Text Generation",key="nav-2"):
-            st.session_state.menu ="gen"  # Store state
-            st.rerun()
-        if st.button(" &nbsp;&nbsp; Image to text Generator",key="nav-3"):
-            st.session_state.menu ="image"  # Store state
-            st.rerun()
-        st.markdown("### 💬 Previous Chats")
-
-       # List existing chats as buttons
-      # List existing chats as buttons with a delete icon
-        for chat_file in chat_files:
-            chat_id = chat_file.replace(".json", "")
-            file_path = os.path.join(CHAT_DIR, chat_file)
-
-            try:
-                with open(file_path, "r", encoding="utf-8") as f:
-                    data = json.load(f)
-
-                if data:
-                    # Get first user message
-                    first_user_message = next(
-                        (msg["content"] for msg in data if msg["role"] == "user"), "🆕 New Chat"
-                    )
-                    preview_line = first_user_message.strip().split("\n")[0]
-                    truncated_preview = preview_line[:50] + ("..." if len(preview_line) > 50 else "")
-                    
-                    # Generate keys
-                    val = f"hist_{chat_id}"
-                    delete_key = f"del_{chat_id}"
-
-                    # Create side-by-side buttons
-                    col1, col2 = st.columns([5, 1])
-                    key = f"col_{chat_id}"
-                    with st.container(key=key):
-                        with col1:
-                            if st.button(f"🗂 {truncated_preview}", key=val):
-                                load_chat_history(chat_id)
-                                st.session_state.show_overlay = False
-                                st.rerun()
-
-
-                            
-
-            except (json.JSONDecodeError, FileNotFoundError):
-                pass  # Skip invalid files
-
-                    # Add your model description logic here
-    if st.button("",key ="btn-new"):
-        st.session_state.show_overlay = True
-           # Set new ID based on existing files
-        new_id = f"chat_{len(os.listdir(CHAT_DIR)) + 1}"
-        st.session_state.chat_id = new_id
-        st.session_state.messages = []
-        save_chat_history()  # Save empty history to create the file
-        st.rerun()
-    with st.container(key="content_1"):
-        if st.button("",key ="create"):
-            st.session_state.show_overlay = True
-            st.rerun()
-        model_names = [m["model"] for m in st.session_state.models]
-        selected_model_name = st.selectbox(task, model_names)
-        selected_model = next((m for m in st.session_state.models if m["model"] == selected_model_name), None)
-        with st.expander("⚙️ Advanced Settings"):
-                temperature = st.slider("Temperature", 0.0, 2.0, 0.7, step=0.1)
-                top_p = st.slider("Top-p ", 0.0, 1.0, 0.9, step=0.05)
-                max_tokens = st.slider("Max tokens", 50, 1024, 512, step=50)
-        if st.session_state.show_overlay == True:
-            st.header(f"{text_h1} – What can I help you with?")
-            user_input = ''
-            if st.session_state.menu != "image":
-                if user_input := st.chat_input("Ask anything",key="imupload"):
-                    st.session_state.user_input = user_input
-                    st.session_state.show_overlay = False
-                    # Add user message
-                    # Add user message to history
-                    st.session_state.messages.append({
-                        "role": "user",
-                        "content": user_input,
-                        "image": st.session_state.save_path if st.session_state.menu == "image" else ""
-                    })
-                                    # Simulate assistant response (replace with real AI later)
-                   
-                            # Indicate that a response should be generated on the chat page
-                    st.session_state.input_text = st.session_state.user_input
-                    st.session_state.input_task = "text"
-
-
-                    st.session_state.generate_response = True
-                    st.rerun()
-
-            if st.session_state.menu == "image":
-                if prompts := st.chat_input(
-                    "Say something and/or attach an image",
-                    accept_file=True,
-                    file_type=["jpg", "jpeg", "png"],key = "uploads"
-                ):                 # Step 3: Open the image using PIL
-                    files = prompts["files"]
-                    text_input = prompts["text"]
-
-            # Optional image handling
-                    image_path = ""
-                    if files:
-                        file = files[0]
-                        image = Image.open(file)
-                        save_dir = "saved_images"
-                        os.makedirs(save_dir, exist_ok=True)
-                        save_path = os.path.join(save_dir, file.name)
-                        image.save(save_path)
-                        st.session_state.save_path = save_path
-                        image_path = save_path  # So you can add it to messages
-
-                        #st.session_state.show_overlay = False
-                   
-                        st.session_state.show_overlay = False
-                        # Add user message
-                        st.session_state.messages.append({
-                                        "role": "user",
-                                        "content": image_path,
-                                        "image": st.session_state.save_path 
-                                        })
-                        st.session_state.input_text = st.session_state.save_path 
-                        st.session_state.input_task = "image"
-
-                    # assistant response 
-               
-                            # Indicate that a response should be generated on the chat page
-                        st.session_state.generate_response = True
-
-                        st.rerun()
-
-            with st.container(key="choices"):
-                col1,col2,col3,col4 = st.columns([1.5,0.1,1.5,1])
-                with col1:
-                    if st.button(choice1,key="choice-1"):
-                        st.session_state.user_input = choice1
-                        if st.session_state.menu == "image":
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": images,
-                            "image": images
-                            })
-                            st.session_state.input_task = "image"
-                            st.session_state.input_text = images
-
-                    # assistant response 
-               
-                            # Indicate that a response should be generated on the chat page
-                        else:
-                            st.session_state.input_text = choice1
-                            st.session_state.input_task = "text"
-
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": choice1,
-                            "image":""
-
-                            })
-                            
-                        st.session_state.show_overlay = False
-                        st.session_state.generate_response = True
-                        st.rerun()
-                    if st.button(choice2,key="choice-2"):
-                        st.session_state.user_input = choice2
-                        if st.session_state.menu == "image":
-                            st.session_state.input_task = "image"
-                            st.session_state.input_text = image1
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": image1,
-                            "image": image1
-                            })
-                        else:
-                            st.session_state.input_text = choice2
-                            st.session_state.input_task = "text"
-
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": choice2,
-                            "image":""
-
-                            })
-                        st.session_state.generate_response = True
-                        st.session_state.show_overlay = False
-                        st.rerun()
-                with col3:
-                    if st.button(choice3,key="choice-5"):
-                        st.session_state.user_input = choice3
-                        if st.session_state.menu == "image":
-                            st.session_state.input_task = "image"
-                            st.session_state.input_text = image2
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": image2,
-                            "image": image2
-                            })
-                        else:
-                            st.session_state.input_text = choice3
-                            st.session_state.input_task = "text"
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": choice3,
-                            "image":""
-
-                            })
-                        st.session_state.generate_response = True
-                        st.session_state.show_overlay = False
-                        st.rerun()
-                    
-                    if  st.button(choice4,key="choice-6"):
-                        st.session_state.user_input = choice4
-                        if st.session_state.menu == "image":
-                            st.session_state.input_task = "image"
-                            st.session_state.input_text = image3
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": image3,
-                            "image": image3
-                            })
-                        else:
-                            st.session_state.input_text = choice4
-                            st.session_state.input_task = "text"
-                            st.session_state.messages.append({
-                            "role": "user",
-                            "content": choice4,
-                            "image":""
-                            })
-                        st.session_state.generate_response = True
-
-                        st.session_state.show_overlay = False
-                        st.rerun()
-
-    if st.session_state.show_overlay == False:
-        def generate_stream_response(text):
-            # Yield the string one character at a time (for streaming)
-            for char in text:
-                yield char
-                time.sleep(0.02)
-
-
-
-            # Display chat messages from history on app rerun
-        if st.session_state.get("generate_response", True):
-            with st.spinner("generating output..."):
-                response = query_huggingface_model(
-                    selected_model,
-                    st.session_state.input_text,                
-                    input_type=st.session_state.input_task,
-                    task=task,
-                    temperature=temperature,top_p=top_p,max_tokens=max_tokens
-                )
-                if st.session_state.menu == "gen":
-                    temper = temperature,
-                    topp = top_p
-                else:
-                    temper = "",
-                    topp = ""
-                    
-                st.session_state.messages.append({
-                    "role": "assistant",
-                    "content": extract_response_content(response),
-                    "image": "",
-                    "model": selected_model['model'],
-                    "temp":temper,
-                    "top_p" : topp,
-                })
-
-            st.session_state.generate_response = False  # Reset the flag
-            save_chat_history()
-            st.rerun()
-
-        for i, message in enumerate(st.session_state.messages):
-            con = message["role"]
-            container_key = f"{con}-{i}"
-            with st.container(key=container_key):
-                with st.chat_message(message["role"]):
-                    if message["role"] == "assistant":
-                        st.markdown(
-                            f"**Model:** `{message['model']}`"
-                            + (
-                                f"&nbsp;&nbsp;**Temperature:** `{message['temp']}`&nbsp;&nbsp;**Top-p:** `{message['top_p']}`"
-                                if message.get('temp') and message.get('top_p') else ""
-                            ),
-                            unsafe_allow_html=True
-                        )
-                        
-                    if message["image"] != "":
-                        st.markdown(f"""<img  src="data:image/png;base64,{base64.b64encode(open(message["image"],"rb").read()).decode()}" class="user-image" alt="Uploaded Image"> """,unsafe_allow_html=True,)
-                    st.markdown(message["content"])
-        if st.session_state.menu == "image":
-            if prompts := st.chat_input(
-                "Say something and/or attach an image",
-                accept_file=True,
-                file_type=["jpg", "jpeg", "png"],key = "upload"
-            ):
-                files = prompts["files"]
-                text_input = prompts["text"]
-
-           # Optional image handling
-                image_path = ""
-                if files:
-                    file = files[0]
-                    image = Image.open(file)
-                    save_dir = "saved_images"
-                    os.makedirs(save_dir, exist_ok=True)
-                    save_path = os.path.join(save_dir, file.name)
-                    image.save(save_path)
-                    st.session_state.save_path = save_path
-                    image_path = save_path  # So you can add it to messages
-
-               
-                # Show in chat window
-                with st.container(key="user-k"):
-                    with st.chat_message("user"):
-                        st.markdown(text_input)
-                        if image_path:
-                            st.markdown(f"""<img  src="data:image/png;base64,{base64.b64encode(open(image_path,"rb").read()).decode()}" class="user-image" alt="Uploaded Image"> """,unsafe_allow_html=True,)
-               
-                with st.container(key="assistant-k"):
-                 # Display assistant response in chat message container
-                    with st.chat_message("assistant"):
-                   
-                        with st.spinner("Model is generating a response..."):
-                            # Add message to history
-                            result = query_huggingface_model(selected_model, st.session_state.save_path , input_type="image")
-                            st.session_state.messages.append({
-                                "role": "user",
-                                "content": text_input,
-                                "image": image_path
-                            })
-                            response = extract_response_content(result)
-                            st.markdown(
-                                f"**Model:** `{selected_model['model'] if isinstance(selected_model, dict) else selected_model}`"
-                                f"{': temperature' + str(temperature) if st.session_state.menu == 'gen' else ''} "
-                                f"{ 'Top-p:'+str( top_p) if st.session_state.menu == 'gen' else ''}"
-                            )
-                            print(response)
-                        st.write_stream(generate_stream_response(response))  # This will stream the text one character at a time
-                    # Add assistant response to chat history
-                    if st.session_state.menu == "gen":
-                        temper = temperature,
-                        topp = top_p
-                    else:
-                        temper = "",
-                        topp = ""
-                    st.session_state.messages.append({"role": "assistant", "content": response,"image":"","model":selected_model['model'],"temp":temper,"top_p":topp})
-                    save_chat_history()
-
-        else:
-        # Accept user input
-            if prompt := st.chat_input("Ask anything"):
-                
-                # Display user message in chat message container
-                with st.container(key="user-k"):
-
-                    with st.chat_message("user"):
-                        st.markdown(prompt)
-                        # Add user message to chat history
-                
-
-                with st.container(key="assistant-k"):
-
-                    # Display assistant response in chat message container
-                    with st.chat_message("assistant"):
-                        with st.spinner("Model is generating a response..."):
-                            st.session_state.messages.append({"role": "user", "content": prompt,"image":""})
-                            result = query_huggingface_model(selected_model, prompt , input_type="text",task=task,temperature=temperature,top_p=top_p,max_tokens=max_tokens)
-                            st.markdown(
-                                f"**Model:** `{selected_model['model'] if isinstance(selected_model, dict) else selected_model}`"
-                                f"{':temperature ' + str(temperature) if st.session_state.menu == 'gen' else ''} "
-                                f"{ 'Top-p:'+str( top_p) if st.session_state.menu == 'gen' else ''}"
-                            )
-
-                            response = extract_response_content(result)
-                        st.write_stream(generate_stream_response(response))                 # Add assistant response to chat history
-                if st.session_state.menu == "gen":
-                        temper = temperature,
-                        topp = top_p
-                else:
-                        temper = "",
-                        topp = ""
-                st.session_state.messages.append({"role": "assistant", "content": response,"image":"","model":selected_model['model'],"temp":temper,"top_p":topp})
-                save_chat_history()
+    init();
+});
+</script>
+</body>
+</html>
+
+
+"""
+# --- Option 1: Using st.components.v1.html (Recommended for more control) ---
+# This allows more control over height and scrolling
+components.html(
+    html_code,
+
+)
+
+# --- Option 2: Using st.markdown with an iframe (Simpler, but less control) ---
+# st.markdown(
+#     f"""
+#     <iframe src="{REACT_APP_URL}" width="100%" height="800" style="border:none;"></iframe>
+#     """,
+#     unsafe_allow_html=True
+# )
+