Update app.py

app.py

@@ -7,7 +7,7 @@ import re
 from datetime import datetime
 
 # ═══════════════════════════════════════════════════════════════════════════
-# 1. CONFIGURAÇÃO DE TELA E CSS
+# 1. CONFIGURAÇÃO DE TELA E CSS (Visual Premium & Sidebar Ajustada)
 # ═══════════════════════════════════════════════════════════════════════════
 st.set_page_config(page_title="Yukina", page_icon="❄", layout="centered")
 
@@ -19,72 +19,57 @@ st.markdown("""
     
     .stApp { background-color: #131314; color: #ededed; }
     
-    /* 1. LARGURA DA BARRA LATERAL (Mais larga no celular) */
-    @media (max-width: 768px) {
-        [data-testid="stSidebar"] { min-width: 85vw !important; max-width: 85vw !important; }
+    /* 1. LARGURA DA BARRA LATERAL (Ajustada para +15% do padrão) */
+    [data-testid="stSidebar"] { 
+        min-width: 350px !important; 
+        max-width: 350px !important; 
+        background-color: #0b0b0b; 
+        border-right: 1px solid #1e1f20; 
     }
-    @media (min-width: 769px) {
-        [data-testid="stSidebar"] { min-width: 350px !important; max-width: 350px !important; }
-    }
-    
-    [data-testid="stSidebar"] { background-color: #0b0b0b; border-right: 1px solid #1e1f20; }
     
     .stChatMessage { background-color: transparent !important; border: none !important; padding-bottom: 8px !important; }
     textarea { background-color: #1e1f20 !important; border-radius: 24px !important; border: 1px solid #3c4043 !important; padding: 12px !important;}
     
-    /* Botões Pílula e Popovers (Geral) */
+    /* Botões Pílula e Popovers */
     .stButton > button, [data-testid="stPopover"] > button { 
         border-radius: 30px !important; 
         background-color: #1e1f20 !important; 
         border: 1px solid #3c4043 !important; 
         color: #e3e3e3 !important; 
         padding: 8px 20px !important;
-        display: inline-flex !important;
-        align-items: center !important;
-        width: auto !important; 
         font-size: 15px !important;
     }
-    .stButton > button:hover, [data-testid="stPopover"] > button:hover { background-color: #2a2b2f !important; border-color: #888 !important; }
-    
-    /* Botões da Sidebar (Chats) - Transparentes e sem borda */
-    [data-testid="stSidebar"] .stButton > button, 
-    [data-testid="stSidebar"] [data-testid="stPopover"] > button { 
-        width: 100% !important; 
-        border: none !important; 
-        background-color: transparent !important; 
-        justify-content: flex-start !important;
-        padding: 10px 15px !important;
-        border-radius: 12px !important;
-    }
-    [data-testid="stSidebar"] .stButton > button:hover,
-    [data-testid="stSidebar"] [data-testid="stPopover"] > button:hover { background-color: #1e1f20 !important; }
     
-    /* 2. MÁGICA: Remove a caixa dos ícones ＋ e ⚙ no TOPO da Sidebar */
-    [data-testid="stSidebar"] [data-testid="stHorizontalBlock"]:first-of-type button {
+    /* 2. REMOVER CAIXINHAS CINZAS DOS ÍCONES (＋ e ⚙) */
+    [data-testid="stSidebar"] button {
         background-color: transparent !important;
         border: none !important;
-        padding: 0 !important;
-        display: flex !important;
-        justify-content: center !important;
-        align-items: center !important;
+        box-shadow: none !important;
         color: #a0a0a0 !important;
-        font-size: 20px !important;
     }
-    [data-testid="stSidebar"] [data-testid="stHorizontalBlock"]:first-of-type button:hover {
+    [data-testid="stSidebar"] button:hover {
         color: #ffffff !important;
-        background-color: transparent !important;
+        background-color: #1e1f20 !important;
+    }
+
+    /* Ajuste específico para os ícones do topo não terem fundo nenhum */
+    [data-testid="stSidebarContent"] [data-testid="stHorizontalBlock"] button {
+        background: none !important;
+        border: none !important;
+        font-size: 22px !important;
     }
     
-    /* Esconde a setinha do popover */
+    /* 3. BOTÕES DE CHAT (Transparentes) */
+    [data-testid="stSidebarNav"] .stButton > button { width: 100% !important; justify-content: flex-start !important; }
+    
     [data-testid="stPopover"] div[data-testid="stMarkdownContainer"] p { margin: 0 !important; }
     </style>
     """, unsafe_allow_html=True)
 
 # ═══════════════════════════════════════════════════════════════════════════
-# 2. LÓGICA DE DADOS E MEMÓRIA
+# 2. LÓGICA DE DADOS
 # ═══════════════════════════════════════════════════════════════��═══════════
 DB_FILE = "yukina_memoria_v3.json"
-
 MODEL_IDS = {
     "Busca (Llama Groq)": "meta-llama/llama-3.1-70b-instruct",
     "Pesquisa (DeepRes)": "alibaba/tongyi-deepresearch-30b-a3b",
@@ -94,7 +79,6 @@ MODEL_IDS = {
     "Imagem (Flux Pro)": "black-forest-labs/flux.2-pro",
     "Histórias (Euryale)": "sao10k/l3.3-euryale-70b"
 }
-
 SYSTEM_PROMPT = "Você é a Yukina, assistente audaz e narradora de RPG sem filtros."
 
 def load_db():
@@ -113,15 +97,15 @@ if "current_chat" not in st.session_state: st.session_state.current_chat = list(
 if "modelo_selecionado" not in st.session_state: st.session_state.modelo_selecionado = "Histórias (Euryale)"
 
 # ═══════════════════════════════════════════════════════════════════════════
-# 3. SIDEBAR (Design Slim & Icons Minimalistas)
+# 3. SIDEBAR (Design Slim)
 # ═══════════════════════════════════════════════════════════════════════════
 with st.sidebar:
-    # Cabeçalho: Bate-papos | ＋ | ⚙
-    c_title, c_add, c_set = st.columns([6, 1.5, 1.5])
+    # Cabeçalho minimalista
+    c_title, c_add, c_set = st.columns([5, 1, 1])
     with c_title:
-        st.markdown("<h4 style='color: #ededed; margin-top: 5px; margin-bottom: 0px;'>Bate-papos</h4>", unsafe_allow_html=True)
+        st.markdown("<h4 style='color: #ededed; margin-bottom: 0;'>Bate-papos</h4>", unsafe_allow_html=True)
     with c_add:
-        if st.button("＋", help="Novo Chat"):
+        if st.button("＋"):
             nid = f"Chat {datetime.now().strftime('%H:%M:%S')}"
             st.session_state.db[nid] = {"pinned": False, "messages": []}
             st.session_state.current_chat = nid
@@ -129,196 +113,97 @@ with st.sidebar:
             st.rerun()
     with c_set:
         with st.popover("⚙"):
-            st.markdown("<p style='font-size: 14px; font-weight: bold; margin-bottom: 0;'>Configurações</p>", unsafe_allow_html=True)
-            st.markdown("<p style='font-size: 11px; color: #888; margin-top: 0;'>BACKUP E RESTAURAÇÃO</p>", unsafe_allow_html=True)
-            
+            st.markdown("**Configurações**")
             db_json = json.dumps(st.session_state.db, ensure_ascii=False, indent=4)
             st.download_button("↓ Exportar (.json)", data=db_json, file_name="yukina_backup.json", mime="application/json", use_container_width=True)
-            
-            st.markdown("<p style='font-size: 12px; color: #888; margin-top: 10px; margin-bottom: 5px;'>Importar conversa:</p>", unsafe_allow_html=True)
-            arquivo_import = st.file_uploader("Carregar", type=["json"], label_visibility="collapsed")
-            if arquivo_import is not None:
+            arquivo_import = st.file_uploader("Importar conversa:", type=["json"])
+            if arquivo_import:
                 try:
-                    dados_importados = json.load(arquivo_import)
-                    st.session_state.db.update(dados_importados)
+                    st.session_state.db.update(json.load(arquivo_import))
                     save_db(st.session_state.db)
-                    st.success("Importado com sucesso!")
-                except:
-                    st.error("Erro no arquivo.")
+                    st.success("Sincronizado!")
+                except: st.error("Erro no ficheiro.")
 
     st.markdown("<br>", unsafe_allow_html=True)
-    busca = st.text_input("Pesquisar", placeholder="Pesquisar...", label_visibility="collapsed")
-    st.markdown("<br>", unsafe_allow_html=True)
-
+    busca = st.text_input("Pesquisar", placeholder="🔍 Pesquisar...", label_visibility="collapsed")
+    
     chats = st.session_state.db
     chats_exibidos = [c for c in chats if busca.lower() in c.lower()] if busca else list(chats.keys())
     chats_exibidos.sort(key=lambda x: not chats[x].get("pinned"))
 
-    # Renderiza os chats com ícones minimalistas
     for c_id in chats_exibidos:
         col_chat, col_opt = st.columns([8, 2])
-        
         with col_chat:
             icon = "⚲" if chats[c_id].get("pinned") else "💬"
-            nome_exibicao = f"**{icon} {c_id[:18]}**" if c_id == st.session_state.current_chat else f"{icon} {c_id[:18]}"
-            if st.button(nome_exibicao, key=f"btn_{c_id}"):
+            txt = f"**{icon} {c_id[:15]}**" if c_id == st.session_state.current_chat else f"{icon} {c_id[:15]}"
+            if st.button(txt, key=f"btn_{c_id}"):
                 st.session_state.current_chat = c_id
                 st.rerun()
-                
         with col_opt:
             with st.popover("⋮"):
                 if st.button("⚲ Fixar", key=f"pin_{c_id}"):
                     st.session_state.db[c_id]["pinned"] = not st.session_state.db[c_id]["pinned"]
                     save_db(st.session_state.db)
                     st.rerun()
-                if st.button("⎘ Duplicar", key=f"dup_{c_id}"):
-                    novo_nome = f"{c_id} (Cópia)"
-                    st.session_state.db[novo_nome] = st.session_state.db[c_id].copy()
-                    st.session_state.db[novo_nome]["pinned"] = False
-                    save_db(st.session_state.db)
-                    st.rerun()
+                if st.button("⎘ Copiar", key=f"dup_{c_id}"):
+                    nid = f"{c_id}_c"
+                    st.session_state.db[nid] = st.session_state.db[c_id].copy()
+                    save_db(st.session_state.db); st.rerun()
                 if st.button("🗑 Apagar", key=f"del_{c_id}"):
                     if len(st.session_state.db) > 1:
                         del st.session_state.db[c_id]
-                        if st.session_state.current_chat == c_id:
-                            st.session_state.current_chat = list(st.session_state.db.keys())[0]
-                        save_db(st.session_state.db)
-                        st.rerun()
+                        st.session_state.current_chat = list(st.session_state.db.keys())[0]
+                        save_db(st.session_state.db); st.rerun()
 
 # ═══════════════════════════════════════════════════════════════════════════
-# 4. ÁREA PRINCIPAL E TELA INICIAL
+# 4. ÁREA PRINCIPAL
 # ═══════════════════════════════════════════════════════════════════════════
 st.markdown("<h3 style='margin-top: -10px; color: #ededed;'>❄ Yukina</h3>", unsafe_allow_html=True)
+mensagens = st.session_state.db[st.session_state.current_chat]["messages"]
 
-mensagens_atuais = st.session_state.db[st.session_state.current_chat]["messages"]
-
-# TELA INICIAL (Pílulas Minimalistas)
-if len(mensagens_atuais) == 0:
-    st.markdown("<br><br>", unsafe_allow_html=True)
-    st.markdown("<h3 style='color: #e3e3e3; font-weight: 400; margin-bottom: 0;'>Olá, Astarok</h3>", unsafe_allow_html=True)
-    st.markdown("<h1 style='color: #e3e3e3; font-size: 32px; line-height: 1.2; margin-top: 5px; margin-bottom: 30px;'>O que você acha que devemos fazer agora?</h1>", unsafe_allow_html=True)
-    
-    if st.button("❄ Conversar com Yukina", use_container_width=False):
-        st.session_state.modelo_selecionado = "Histórias (Euryale)"
-        st.rerun()
-    if st.button("🖼 Criar imagem", use_container_width=False):
-        st.session_state.modelo_selecionado = "Imagem (Flux Pro)"
-        st.rerun()
-    if st.button("👁 Analisar foto", use_container_width=False):
-        st.session_state.modelo_selecionado = "Visão (Qwen VL)"
-        st.rerun()
-    if st.button("📜 Criar história", use_container_width=False):
-        st.session_state.modelo_selecionado = "Histórias (Euryale)"
-        st.rerun()
-    if st.button("⌕ Pesquisar algo", use_container_width=False):
-        st.session_state.modelo_selecionado = "Busca (Llama Groq)"
-        st.rerun()
-
-# TELA DE CHAT
+if len(mensagens) == 0:
+    st.markdown("<br><br><h3 style='color: #888;'>Olá, Astarok</h3><h1 style='color: #fff;'>O que vamos fazer?</h1>", unsafe_allow_html=True)
+    for acao, mot in [("❄ Conversar com Yukina", "Histórias (Euryale)"), ("🖼 Criar imagem", "Imagem (Flux Pro)"), ("👁 Analisar foto", "Visão (Qwen VL)"), ("📜 Criar história", "Histórias (Euryale)"), ("⌕ Pesquisar", "Busca (Llama Groq)")]:
+        if st.button(acao): st.session_state.modelo_selecionado = mot; st.rerun()
 else:
-    for msg in mensagens_atuais:
-        with st.chat_message(msg["role"]):
-            if "image_url" in msg:
-                st.image(msg["image_url"])
-            else:
-                st.markdown(msg["content"])
+    for m in mensagens:
+        with st.chat_message(m["role"]):
+            if "image_url" in m: st.image(m["image_url"])
+            else: st.markdown(m["content"])
 
-# ═══════════════════════════════════════════════════════════════════════════
-# 5. TOOLBAR INFERIOR (Estilo Gemini)
-# ═══════════════════════════════════════════════════════════════════════════
 st.markdown("<br>", unsafe_allow_html=True)
-
 t_col1, t_col2, t_space = st.columns([1.5, 1.5, 7])
-
 with t_col1:
-    with st.popover("＋"):
-        st.markdown("<p style='font-size: 13px; color: #888;'>Mídia (Necessita motor de Visão ativo).</p>", unsafe_allow_html=True)
-        img_upload = st.file_uploader("Upload", type=["png", "jpg", "jpeg"], label_visibility="collapsed")
+    with st.popover("＋"): img_upload = st.file_uploader("Mídia", type=["png", "jpg", "jpeg"])
 with t_col2:
-    with st.popover("⚙"):
-        st.session_state.modelo_selecionado = st.radio(
-            "Motor Ativo:", 
-            list(MODEL_IDS.keys()), 
-            index=list(MODEL_IDS.keys()).index(st.session_state.modelo_selecionado)
-        )
+    with st.popover("⚙"): st.session_state.modelo_selecionado = st.radio("Motor:", list(MODEL_IDS.keys()), index=list(MODEL_IDS.keys()).index(st.session_state.modelo_selecionado))
 
-# INPUT DE MENSAGEM
 if prompt := st.chat_input("Peça à Yukina..."):
-    
     st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "user", "content": prompt})
-    with st.chat_message("user"):
-        st.markdown(prompt)
-
+    with st.chat_message("user"): st.markdown(prompt)
     with st.chat_message("assistant"):
         api_key = os.getenv("OPENROUTER_API_KEY")
         headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
-        
-        # MOTOR DE IMAGEM
         if "Imagem" in st.session_state.modelo_selecionado:
-            with st.spinner("Desenhando..."):
-                payload = {"model": MODEL_IDS[st.session_state.modelo_selecionado], "messages": [{"role": "user", "content": prompt}], "modalities": ["image"]}
-                try:
-                    resp = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json=payload).json()
-                    message_obj = resp['choices'][0]['message']
-                    img_url = None
-                    if 'images' in message_obj and len(message_obj['images']) > 0:
-                        img_url = message_obj['images'][0]['image_url']['url']
-                    elif 'content' in message_obj and message_obj['content']:
-                        content = message_obj['content']
-                        if content.startswith('data:image'): img_url = content
-                        else:
-                            urls = re.findall(r'(https?://[^\s)]+)', content)
-                            if urls: img_url = urls[0]
-
-                    if img_url:
-                        st.image(img_url)
-                        st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": "Arte gerada.", "image_url": img_url})
-                    else:
-                        st.error("Falha ao gerar a imagem.")
-                except Exception as e:
-                    st.error(f"Erro: {e}")
-        
-        # MOTOR DE VISÃO
-        elif "Visão" in st.session_state.modelo_selecionado:
-            if not img_upload:
-                st.error("⚠️ Você está usando o motor de Visão. Clique no '＋' e anexe uma imagem primeiro!")
-            else:
-                with st.spinner("Analisando..."):
-                    try:
-                        encoded_image = base64.b64encode(img_upload.read()).decode('utf-8')
-                        data_url = f"data:image/png;base64,{encoded_image}"
-                        payload = {
-                            "model": MODEL_IDS[st.session_state.modelo_selecionado],
-                            "messages": [{"role": "system", "content": SYSTEM_PROMPT}, {"role": "user", "content": [{"type": "text", "text": prompt}, {"type": "image_url", "image_url": {"url": data_url}}]}],
-                            "stream": False
-                        }
-                        resp = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json=payload).json()
-                        analise = resp['choices'][0]['message']['content']
-                        st.markdown(analise)
-                        st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": analise})
-                    except Exception as e:
-                        st.error(f"Erro na Visão: {e}")
-
-        # MOTOR DE TEXTO
+            res = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json={"model": MODEL_IDS[st.session_state.modelo_selecionado], "messages": [{"role": "user", "content": prompt}], "modalities": ["image"]}).json()
+            url = res['choices'][0]['message']['images'][0]['image_url']['url']
+            st.image(url)
+            st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": "Arte.", "image_url": url})
+        elif "Visão" in st.session_state.modelo_selecionado and img_upload:
+            img_b64 = base64.b64encode(img_upload.read()).decode()
+            res = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json={"model": MODEL_IDS[st.session_state.modelo_selecionado], "messages": [{"role": "user", "content": [{"type": "text", "text": prompt}, {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img_b64}"}}]} ]}).json()
+            ans = res['choices'][0]['message']['content']
+            st.markdown(ans); st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": ans})
         else:
-            ph = st.empty()
-            full_res = ""
-            historico_limpo = [m for m in st.session_state.db[st.session_state.current_chat]["messages"] if "image_url" not in m]
-            payload = {"model": MODEL_IDS[st.session_state.modelo_selecionado], "messages": [{"role": "system", "content": SYSTEM_PROMPT}] + historico_limpo, "stream": True}
-            try:
-                resp = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json=payload, stream=True)
-                for line in resp.iter_lines():
-                    if line:
-                        try:
-                            d = json.loads(line.decode('utf-8').replace('data: ', ''))
-                            content = d['choices'][0]['delta'].get('content', '')
-                            full_res += content
-                            ph.markdown(full_res + "▌")
-                        except: continue
-                ph.markdown(full_res)
-                st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": full_res})
-            except Exception as e:
-                st.error(f"Erro: {e}")
-                
+            ph = st.empty(); full = ""
+            resp = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json={"model": MODEL_IDS[st.session_state.modelo_selecionado], "messages": [{"role": "system", "content": SYSTEM_PROMPT}] + [m for m in mensagens if "image_url" not in m], "stream": True}, stream=True)
+            for l in resp.iter_lines():
+                if l:
+                    try:
+                        d = json.loads(l.decode().replace('data: ', ''))
+                        full += d['choices'][0]['delta'].get('content', '')
+                        ph.markdown(full + "▌")
+                    except: pass
+            ph.markdown(full); st.session_state.db[st.session_state.current_chat]["messages"].append({"role": "assistant", "content": full})
     save_db(st.session_state.db)