Create app.py

app.py

@@ -0,0 +1,1811 @@
+import streamlit as st
+import yfinance as yf
+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 matplotlib.pyplot as plt
+import numpy as np
+import base64
+import pandas as pd
+import time
+from transformers import pipeline
+from dotenv import load_dotenv
+import os
+import requests
+import random
+
+# Try loading environment variables locally
+try:
+    from dotenv import load_dotenv
+    load_dotenv()
+except:
+    pass
+
+# Get the token from environment variables
+HF_TOKEN = os.getenv("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 = -13
+else:
+    top= -8
+    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_new_tokens=512,task="text-classification"):
+    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_new_tokens,
+                    "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()
+
+    except requests.exceptions.RequestException as e:
+        return {"error": str(e)}
+
+    
+    
+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:Model is temporary unavailable please check your internet connection or try again later"
+
+    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.png "
+
+
+    if st.session_state.framework == "lstm":
+        bg_color = "#FF5733"  # For example, a warm red/orange
+        bg_color_iv = "orange"  # For example, a warm red/orange
+        text_h1 = "BI-DIRECTIONAL"
+        text_i = "Long short term memory"
+        model = "TENSORFLOW"
+        st.session_state.model = "best_bilstm_model.h5"
+    if st.session_state.framework == "gru":
+        bg_color = "#FF5733"  # For example, a warm red/orange
+        bg_color_iv = "orange"  # For example, a warm red/orange
+        text_h1 = "GATED RECURRENT UNIT"
+        text_i = "Recurrent Neural Network"
+        model = "TENSORFLOW"
+        st.session_state.model = "best_gru_model.h5"
+    if st.session_state.framework == "gen":
+        bg_color = "#FF5733"  # For example, a warm red/orange
+        bg_color_iv = "orange"  # For example, a warm red/orange
+        text_h1 = "Amazon Stock Predictor"
+        text_i = "21 Days Ahead of the Market"
+        model = "TENSORFLOW"
+    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 */
+
+
+            }}
+            
+
+            section[data-testid="stMain"] {{
+                overflow:hidden !important;
+
+            }}
+            
+            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:550px !important;
+                color:orange;
+                font-size:2.2rem;
+
+            }}
+        
+            /* Button row styling */
+            .button-row {{
+                display: flex;
+                justify-content: flex-start;
+                gap: 20px;
+                margin-bottom: 20px;
+            }}
+
+        
+
+            .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 */
+            display: flex;
+            align-items: center;
+            transform: scale(1.05); /* Slightly enlarge button */
+            transform: scale(1.1); /* Slight zoom on hover */
+            justify-content: center;
+            
+
+
+        }}
+
+        /* 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 */
+        }}
+        
+            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;
+        
+        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>
+    
+        """,
+        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;
+            }}
+            
+        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;
+            }}
+        [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;
+
+                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 */
+
+
+                    }}
+        
+            @media (max-width: 768px) {{
+        .logo-text-container h1 {{
+            font-size: 12px;
+            
+        }}
+    .logo-text-container i {{
+            font-size: 10px;
+            ma
+        }}
+    
+        
+        .logo-text-container img {{
+                width: 30px; /* Adjust logo size */
+                border-radius: 10px; /* Optional: round edges */
+                margin-left:15px;
+                margin-top: -35px;
+
+            }}
+            
+    }}
+        </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 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 = 'Classify this email as "Spam" or "Not Spam": "Win a vacation to the Bahamas! Click the link below to claim your prize."'
+        choice2 = 'Is the following tweet "Positive", "Negative", or "Neutral"? "Can’t believe my phone just died right before an important call. Ugh!"'
+        choice3 = 'Categorize this news headline: "Apple unveils new AI chip in latest iPhone" Categories: Technology, Sports, Health, Politics'
+        choice4 = 'Assign a topic label to this sentence: "I made a delicious homemade lasagna last night." Options: Food, Travel, Finance, Education'
+        text_h1 = "🏷️ Text Classification"
+        images="images.png"
+        images="images.png"
+        image1 = 'images.png'
+        image2 = 'images.png'
+        image3 = 'images.png'
+        margin = 0
+        margintop = "-20"
+        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"
+    }
+]
+
+        task =  "text-classification"
+    st.session_state.model = "best_bilstm_model.h5"
+    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"
+        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"
+    }
+]
+        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'
+        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"
+    }
+]
+        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;
+    }
+    section[data-testid="stSidebar"] ::-webkit-scrollbar-thumb {
+        background-color: #888;
+        border-radius: 10px;
+    }
+    </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;
+
+            background:#f9f9f9;
+
+        }}
+        *, html {{scroll-behavior: smooth !important;}}
+
+        div[data-testid="stSidebarContent"]{{
+         overflow-x:hidden !important;
+
+
+        }}
+         /* 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:500px;
+             width:550px;
+             
+         }}
+         div[class*="st-key-assistant-"]{{
+             margin-left:120px;
+             
+         }}
+         
+        .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;
+            z-index: 11 !important; /* Ensure it stays above other elements */
+            border-bottom:1px solid #ccc;
+            width:64%;
+            height:85px;
+            margin-left:530px;
+            
+
+        }}
+         div[data-testid="stDecoration"]{{
+        background-image:none;
+        }}
+         button[data-testid="stBaseButton-secondary"]{{
+        background:transparent;
+        border:none;
+        }}
+        div[data-testid="stApp"]{{
+         background:#f5f3f0;
+        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;
+        
+        }}
+        div[data-testid="stChatMessage"]{{
+            z-index:1;
+            border-radius:50px;
+            
+            
+        }}
+        section[data-testid="stAppScrollToBottomContainer"]{{
+            margin-top:80px !important;
+            padding-right:50px !important;
+        }}
+        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;     
+
+        }}
+        
+   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: white;
+            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 */
+            height: 96.5vh;  /* Full viewport height */
+            overflow-x:hidden;
+            overflow-y:hidden;
+             display: flex;
+             
+
+        }}
+        
+ 
+        div[data-testid="stSidebarHeader"]{{
+            height:40px !important;
+            position:fixed;
+            z-index:100000000000;
+            background:#f9f9f9;
+
+            width:300px;
+        }}
+         section[data-testid="stMain"]{{
+           margin-left:-70px !important;
+        }}
+    section[data-testid="stSidebar"]{{
+
+
+        background:#f7f7f8;
+        
+        }}
+        [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-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="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:10000000;
+            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;
+            
+             
+         }}
+           [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"]{{
+
+          border-radius:80px !important;
+             border-radius:80px !important;
+            width:380px !important;
+             margin-top:-18px !important;
+            background-image: url(data:image/png;base64,{base64.b64encode(open("txt.png", "rb").read()).decode()});
+            background-size: contain; /* size of the image */
+           background-repeat: no-repeat;
+            color :black !important;
+            padding:10px;
+            padding-left:15px;
+            height:50px !important;
+            margin-left:-7px !important;
+         
+            }}
+              [class*="st-key-nav-3"]{{
+
+            border-radius:80px !important;
+             border-radius:80px !important;
+            width:280px !important;
+             margin-top:-18px !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;
+         
+            }}
+               [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;
+
+            }}
+            
+            
+        </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); }
+    }
+
+    </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([4, 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)
+
+                        with col2:
+                            if st.button("🗑️", key=delete_key):
+                                os.remove(file_path)
+                                st.success(f"Deleted chat: {chat_id}")
+                                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)
+        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
+                )
+
+                st.session_state.messages.append({
+                    "role": "assistant",
+                    "content": extract_response_content(response),
+                    "image": "",
+                    "model": selected_model['model']
+                })
+
+            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']}`")
+                    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}`")
+                            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
+                    st.session_state.messages.append({"role": "assistant", "content": response,"image":"","model":selected_model['model']})
+                    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)
+                            st.markdown(f"**Model:** `{selected_model['model'] if isinstance(selected_model, dict) else selected_model}`")
+                            response = extract_response_content(result)
+                        st.write_stream(generate_stream_response(response))                 # Add assistant response to chat history
+                st.session_state.messages.append({"role": "assistant", "content": response,"image":"","model":selected_model['model']})
+                save_chat_history()