page1.py

import streamlit as st
from langchain_core.messages import HumanMessage, AIMessage
from langchain_google_genai import ChatGoogleGenerativeAI
from langchain.chains import LLMChain
from langchain.prompts import PromptTemplate
from langchain.memory import ConversationSummaryMemory
from langchain.memory.chat_message_histories import StreamlitChatMessageHistory
import base64
import io
import time
from PIL import Image
import os
# Set your Google API key here
GOOGLE_API_KEY = os.environ.get("api_key")


def convert_to_base64(uploaded_file):
    """Convert uploaded image to Base64 format (supports JPEG and PNG)"""
    image = Image.open(uploaded_file)
    buffered = io.BytesIO()

    # Preserve format (default to PNG if unknown)
    format = image.format if image.format in ["JPEG", "PNG"] else "PNG"

    image.save(buffered, format=format)
    return base64.b64encode(buffered.getvalue()).decode("utf-8")


def text():
    st.title("Gemini 2.0 Thinking Experimental")
    st.markdown("""
    <style>
        .anim-typewriter {
            animation: typewriter 3s steps(40) 1s 1 normal both, 
                       blinkTextCursor 800ms steps(40) infinite normal;
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid;
            font-family: serif;
            font-size: 0.9em;
        }
        @keyframes typewriter {
            from { width: 0; }
            to { width: 100%; }
        }
        @keyframes blinkTextCursor {
            from { border-right-color: rgba(255,255,255,0.75); }
            to { border-right-color: transparent; }
        }
        .dot-pulse {
            position: relative;
            left: -9999px;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #9880ff;
            color: #9880ff;
            box-shadow: 9999px 0 0 -5px;
            animation: dot-pulse 1.5s infinite linear;
            animation-delay: 0.25s;
        }
    </style>
    """, unsafe_allow_html=True)

    # Initialize session state
    if "messages" not in st.session_state:
        st.session_state.messages = []
        st.session_state.chat_history = StreamlitChatMessageHistory()
        st.session_state.memory = ConversationSummaryMemory(
            llm=ChatGoogleGenerativeAI(model="gemini-2.0-flash-thinking-exp-01-21", google_api_key=GOOGLE_API_KEY),
            memory_key="history",
            chat_memory=st.session_state.chat_history
        )

    # Initialize Gemini model
    llm = ChatGoogleGenerativeAI(
        model="gemini-2.0-flash-thinking-exp-01-21",
        google_api_key=GOOGLE_API_KEY,
        temperature=0.3,
        streaming=True,
        timeout=60,
        max_retries=3

    )

    # Display chat messages
    chat_container = st.container()
    with chat_container:
        # Show initial bot message
        if len(st.session_state.messages) == 0:
            animated_text = '<div class="anim-typewriter">Hello 👋, how may I assist you today?</div>'
            #st.chat_message("assistant").markdown(animated_text, unsafe_allow_html=True)
            st.session_state.messages.append({"role": "assistant", "content": "Hello 👋, how may I assist you today?"})

        # Display historical messages
        for message in st.session_state.messages[0:]:  # Skip first static message
            if message["role"] == "user":
                if message.get("image"):
                    st.chat_message("user", avatar="🧑").markdown(
                        f'{message["content"]}<br><img src="{message["image"]}" width="200">',
                        unsafe_allow_html=True
                    )
                else:
                    st.chat_message("user", avatar="🧑").markdown(message["content"])
            else:
                st.chat_message("assistant", avatar="🤖").markdown(message["content"])

    # Chat input with multimodal support
    user_input = st.chat_input("Say something", accept_file=True, file_type=["png", "jpg", "jpeg"])

    if user_input:
        # Process user input
        image_url = ""
        message_content = [{"type": "text", "text": user_input.text}]

        if user_input["files"]:
            uploaded_file = user_input["files"][0]
            image_base64 = convert_to_base64(uploaded_file)
            image_url = f"data:image/jpeg;base64,{image_base64}"
            message_content.append({"type": "image_url", "image_url": image_url})

        # Add user message to UI
        with chat_container:
            if image_url:
                st.chat_message("user", avatar="🧑").markdown(
                    f'''
                    
                        {user_input.text}
                        <br>
                        <img src="{image_url}" width="200" style="margin-top: 10px; border-radius: 8px;">
                    
                    ''',
                    unsafe_allow_html=True
                )

            else:
                st.chat_message("user", avatar="🧑").markdown(user_input.text)

        # Store in session state
        st.session_state.messages.append({
            "role": "user",
            "content": user_input.text,
            "image": image_url if user_input["files"] else ""
        })

        # Create LangChain message
        user_message = HumanMessage(content=message_content)
        st.session_state.chat_history.add_message(user_message)

        # Generate streaming response
        history = st.session_state.chat_history.messages
        typing_container = st.empty()

        def stream_generator(history, user_message):
            # Placeholder for "Thinking..." and "Typing..."
            typing_container = st.empty()

            # Show "Thinking..." first
            typing_container.markdown('<p class="fade-text">Thinking...</p>', unsafe_allow_html=True)

            st.markdown("""
                <style>
                    @keyframes fade {
                        0% { opacity: 0.3; }
                        50% { opacity: 1; }
                        100% { opacity: 0.3; }
                    }
                    .fade-text {
                        font-size: 16px;
                        font-weight: bold;
                        color: #3498db;
                        animation: fade 1.5s infinite;
                    }
                </style>
            """, unsafe_allow_html=True)

            response = llm.stream(history + [user_message])

            # Buffer for partial words
            buffer = ""

            # Flag to change message
            first_chunk_received = False

            # Pause settings
            PAUSE_AFTER = {".", "!", "?", ",", ";", ":"}
            PAUSE_MULTIPLIER = 2.5  # Pause longer for punctuation

            for chunk in response:
                if not first_chunk_received:
                    typing_container.empty()
                    typing_container.markdown('<p class="fade-text">Typing...</p>', unsafe_allow_html=True)
                    first_chunk_received = True

                content = buffer + chunk.content
                words = content.split(' ')

                # Check if last word is complete
                if not content.endswith(' '):
                    buffer = words.pop()
                else:
                    buffer = ""

                for word in words:
                    yield word + ' '  # Stream word-by-word

                    # Add delay for natural pauses
                    base_delay = 0.03
                    last_char = word[-1] if word else ''
                    time.sleep(base_delay * PAUSE_MULTIPLIER if last_char in PAUSE_AFTER else base_delay)

            # Yield any remaining content in buffer
            if buffer:
                yield buffer
                time.sleep(0.03)

            # Clear "Typing..." message after response finishes
            typing_container.empty()

        # Generate streaming response
        with st.chat_message("assistant", avatar="🤖"):

            full_response = st.write_stream(
                stream_generator(
                    st.session_state.chat_history.messages,
                    user_message
                )
            )

            typing_container.empty()  # Remove status message

        # Update session state
        st.session_state.messages.append({
            "role": "assistant",
            "content": full_response
        })

        # Update conversation memory
        ai_message = AIMessage(content=full_response)
        st.session_state.chat_history.add_message(ai_message)
        st.session_state.memory.save_context(
            {"input": user_message.content},
            {"output": ai_message.content}
        )

        #st.sidebar.subheader("Raw Chat History")
        #st.sidebar.write(st.session_state.chat_history.messages)