Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| from typing import Dict, Any | |
| from src.langgraphagenticai.ui.uiconfigfile import Config | |
| class LoadStreamlitUI: | |
| def __init__(self): | |
| self.config = Config() | |
| self.user_controls: Dict[str, Any] = {} | |
| def _inject_css(self): | |
| st.markdown( | |
| """ | |
| <style> | |
| :root{ | |
| --bg: #0b0f19; | |
| --tint: #0f172a; | |
| --muted: #a9b4c2; | |
| --card: rgba(255,255,255,0.06); | |
| --ring: rgba(124,77,255,.35); | |
| } | |
| /* Page background */ | |
| .stApp, .stApp > header { background: radial-gradient(1200px 700px at 10% -10%, rgba(124,77,255,.15), transparent 35%), radial-gradient(900px 600px at 100% 0%, rgba(0,231,240,.12), transparent 40%), var(--bg) !important; } | |
| .block-container { padding-top: 1.2rem; padding-bottom: 2.2rem; } | |
| /* Hero header */ | |
| .hero { | |
| position: relative; padding: 26px 22px; | |
| border-radius: 18px; | |
| background: linear-gradient(135deg, rgba(124,77,255,.18), rgba(0,231,240,.10)); | |
| border: 1px solid rgba(255,255,255,.08); | |
| box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); | |
| } | |
| .hero h1 { | |
| margin: 0; font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: .2px; | |
| background: linear-gradient(90deg, #e8edff, #c6f7ff, #e8edff); | |
| -webkit-background-clip: text; background-clip: text; color: transparent; | |
| } | |
| .hero p { margin: 6px 0 0; font-size: 13px; color: var(--muted); } | |
| /* Sidebar — minimal, pretty */ | |
| section[data-testid="stSidebar"]{ | |
| background: linear-gradient(180deg, rgba(124,77,255,.16), rgba(11,15,25,1)) !important; | |
| border-right: 1px solid rgba(255,255,255,.08); | |
| } | |
| .soft-card{ | |
| background: var(--card); backdrop-filter: blur(10px); | |
| border-radius: 16px; border: 1px solid rgba(255,255,255,.08); | |
| padding: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.35); | |
| } | |
| .side-title{ | |
| font-weight: 700; font-size: 13px; letter-spacing: .3px; color: #eaf2ff; margin: 6px 0 10px; | |
| } | |
| .hint{ margin-top: 6px; font-size: 12px; color: var(--muted); } | |
| /* Main minimal card wrapper */ | |
| .card{ | |
| background: var(--card); backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,.08); | |
| border-radius: 16px; padding: 16px; | |
| box-shadow: 0 12px 30px rgba(0,0,0,.40); | |
| } | |
| /* Subtle glow ring on focus widgets */ | |
| .stSelectbox > div:focus-within, | |
| .stTextInput > div:focus-within { | |
| box-shadow: 0 0 0 1px var(--ring) !important; | |
| border-radius: 12px; | |
| } | |
| /* Compact spacing on widgets */ | |
| .stSelectbox, .stTextInput { margin-bottom: 10px !important; } | |
| .stCaption, .stMarkdown p { color: var(--muted) !important; } | |
| /* Footer */ | |
| .footer { margin-top: 12px; text-align:center; color: var(--muted); font-size: 12px; } | |
| </style> | |
| """, | |
| unsafe_allow_html=True, | |
| ) | |
| def load_streamlit_ui(self): | |
| st.set_page_config( | |
| page_title=f"🤖 {self.config.get_page_title()}", | |
| layout="wide", | |
| page_icon="🤖", | |
| ) | |
| self._inject_css() | |
| # ---- Header (beautiful, minimal) ---- | |
| st.markdown( | |
| f""" | |
| <div class="hero"> | |
| <h1>🤖 {self.config.get_page_title()}</h1> | |
| </div> | |
| """, | |
| unsafe_allow_html=True, | |
| ) | |
| # ---- Sidebar (your same controls; just styled) ---- | |
| with st.sidebar: | |
| st.markdown('<div class="soft-card">', unsafe_allow_html=True) | |
| st.markdown('<div class="side-title">⚙️ Configuration</div>', unsafe_allow_html=True) | |
| llm_options = self.config.get_llm_options() | |
| usecase_options = self.config.get_usecase_options() | |
| self.user_controls["selected_llm"] = st.selectbox("Select LLM", llm_options) | |
| if self.user_controls["selected_llm"] == "Groq": | |
| model_options = self.config.get_groq_model_options() | |
| self.user_controls["selected_groq_model"] = st.selectbox("Select Groq Model", model_options) | |
| show_key = st.toggle("Show API key", value=False) | |
| self.user_controls["GROQ_API_KEY"] = st.text_input( | |
| "GROQ API Key", | |
| type="default" if show_key else "password", | |
| placeholder="Enter your GROQ_API_KEY", | |
| ) | |
| st.warning("⚠️ Please enter your GROQ API key to proceed, Get it from https://console.groq.com/keys") | |
| # if not self.user_controls["GROQ_API_KEY"]: | |
| # st.warning("Please enter your GROQ API key to proceed.") | |
| self.user_controls["selected_usecase"] = st.selectbox("Select Use Case", usecase_options) | |
| # st.markdown('<p class="hint">Selections apply instantly. No extra sections or tabs.</p>', unsafe_allow_html=True) | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| # ---- Optional slim content frame (kept minimal) ---- | |
| st.markdown('<div style="height: 10px;"></div>', unsafe_allow_html=True) | |
| st.markdown('<div class="card">', unsafe_allow_html=True) | |
| st.write("Ask anything, Keep it simple and elegant ✨") | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| st.markdown('<div class="footer">Built by Ai Freak Sachin.H</div>', unsafe_allow_html=True) | |
| return self.user_controls | |
| # --- Optional direct run --- | |
| if __name__ == "__main__": | |
| ui = LoadStreamlitUI() | |
| controls = ui.load_streamlit_ui() | |