Update app.py

app.py

@@ -375,7 +375,7 @@ a:hover {
 
 # Tworzenie interfejsu Gradio z niestandardowym CSS
 with gr.Blocks(css=custom_css) as demo:
-    # Nagłówek "Cards"
+    # Nagłówek "Cards" z opisem w stylu kodu
     gr.HTML("""
     <div class="custom-card">
       <div class="custom-card-header">
@@ -390,55 +390,38 @@ with gr.Blocks(css=custom_css) as demo:
             <circle r="12" cy="12" cx="12"></circle>
           </svg>
         </div>
-        <span class="file-name">ProgressBar.tsx</span>
+        <span class="file-name">D-LOGIC_Interface.jsx</span>
       </div>
       <div class="custom-card-body">
         <p class="code-line">
-          <span class="text-slate">&lt;</span><span class="text-pink">Card</span><span class="text-slate">&gt;</span>
+          <span class="text-slate">&lt;</span><span class="text-pink">Header</span><span class="text-slate">&gt;</span><span class="highlight">🧠 D-LOGIC: Twój Inteligentny Asystent AI</span><span class="text-slate">&lt;/</span><span class="text-pink">Header</span><span class="text-slate">&gt;</span>
         </p>
         <p class="code-line">
-          <span class="text-slate">&lt;</span><span class="text-pink">Text</span><span class="text-slate">&gt;</span><span class="highlight">Ticket Sales</span><span class="text-slate">&lt;/</span><span class="text-pink">Text</span><span class="text-slate">&gt;</span>
+          <span class="text-slate">&lt;</span><span class="text-pink">Description</span><span class="text-slate">&gt;</span><span class="highlight">D-LOGIC to zaawansowany asystent AI stworzony przez Rafała Dembskiego. Dzięki zaawansowanemu procesowi myślowemu, D-LOGIC analizuje, planuje i dostarcza precyzyjne odpowiedzi na Twoje pytania, zapewniając interaktywną i angażującą konwersację.</span><span class="text-slate">&lt;/</span><span class="text-pink">Description</span><span class="text-slate">&gt;</span>
         </p>
         <p class="code-line">
-          <span class="text-slate">&lt;</span><span class="text-pink">Metric</span><span class="text-slate">&gt;</span><span class="highlight">$ 71,465</span><span class="text-slate">&lt;/</span><span class="text-pink">Metric</span><span class="text-slate">&gt;</span>
-        </p>
-        <p class="code-line">
-          <span class="text-slate">&lt;</span><span class="text-pink">Flex</span><span class="text-slate"> className=</span><span class="highlight">"mt-3"</span><span class="text-slate">&gt;</span>
+          <span class="text-slate">&lt;</span><span class="text-pink">Features</span><span class="text-slate">&gt;</span>
         </p>
         <p class="code-line" style="margin-left: 1.5rem;">
-          <span class="text-slate">&lt;</span><span class="text-pink">Text</span><span class="text-slate">&gt;</span><span class="text-slate">&lt;</span><span class="text-pink">Bold</span><span class="text-slate">&gt;</span><span class="highlight">32%</span><span class="text-slate">&lt;/</span><span class="text-pink">Bold</span><span class="text-slate">&gt;</span><span class="highlight"> of annual target</span><span class="text-slate">&lt;/</span><span class="text-pink">Text</span><span class="text-slate">&gt;</span>
+          <span class="text-slate">&lt;</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span><span class="highlight">Analiza Kontekstu</span><span class="text-slate">&lt;/</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span>
         </p>
         <p class="code-line" style="margin-left: 1.5rem;">
-          <span class="text-slate">&lt;</span><span class="text-pink">Text</span><span class="text-slate">&gt;</span><span class="highlight">$ 223,328</span><span class="text-slate">&lt;/</span><span class="text-pink">Text</span><span class="text-slate">&gt;</span>
+          <span class="text-slate">&lt;</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span><span class="highlight">Planowanie Odpowiedzi</span><span class="text-slate">&lt;/</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span>
         </p>
-        <p class="code-line">
-          <span class="text-slate">&lt;/</span><span class="text-pink">Flex</span><span class="text-slate">&gt;</span>
+        <p class="code-line" style="margin-left: 1.5rem;">
+          <span class="text-slate">&lt;</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span><span class="highlight">Generowanie Rozwiązań</span><span class="text-slate">&lt;/</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span>
         </p>
-        <p class="code-line">
-          <span class="text-slate">&lt;</span><span class="text-pink">ProgressBar</span><span class="text-slate"> value=</span><span class="highlight">{ 32 }</span><span class="text-slate"> className=</span><span class="highlight">"mt-3"</span><span class="text-slate">/&gt;</span>
+        <p class="code-line" style="margin-left: 1.5rem;">
+          <span class="text-slate">&lt;</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span><span class="highlight">Refleksja</span><span class="text-slate">&lt;/</span><span class="text-pink">Feature</span><span class="text-slate">&gt;</span>
         </p>
         <p class="code-line">
-          <span class="text-slate">&lt;/</span><span class="text-pink">Card</span><span class="text-slate">&gt;</span>
+          <span class="text-slate">&lt;/</span><span class="text-pink">Features</span><span class="text-slate">&gt;</span>
         </p>
       </div>
     </div>
     """)
-    
-    # Nagłówek główny
-    gr.Markdown("# 🧠 **D-LOGIC: Twój Inteligentny Asystent AI**")
-    
-    # Opis narzędzia
-    gr.Markdown("""
-    **D-LOGIC** to zaawansowany asystent AI stworzony przez Rafała Dembskiego. Dzięki zaawansowanemu procesowi myślowemu, **D-LOGIC** analizuje, planuje i dostarcza precyzyjne odpowiedzi na Twoje pytania, zapewniając jednocześnie interaktywną i angażującą konwersację.
-
-    ### **Proces Myślowy ChatBota**:
-    - **Analiza Kontekstu**: Zrozumienie intencji i emocji użytkownika.
-    - **Planowanie Odpowiedzi**: Rozbicie problemu na mniejsze kroki.
-    - **Generowanie Rozwiązań**: Proponowanie najlepszych możliwych odpowiedzi.
-    - **Refleksja**: Samoocena jakości odpowiedzi i procesów myślowych.
-    """)
-    
-    # Wybór modelu i budżet myślenia
+
+    # Sekcja wyboru modelu i budżetu myślenia
     with gr.Row():
         with gr.Column(scale=1):
             model = gr.Dropdown(
@@ -456,7 +439,7 @@ with gr.Blocks(css=custom_css) as demo:
                 label="🧩 Budżet Myślenia",
                 info="Maksymalna liczba kroków, które model może przemyśleć"
             )
-    
+
     # Sekcja czatu
     chatbot = gr.Chatbot(
         label="💬 Chat",
@@ -467,7 +450,7 @@ with gr.Blocks(css=custom_css) as demo:
         layout="vertical",
         height=600
     )
-    
+
     # Pole do wpisywania wiadomości
     with gr.Row():
         msg = gr.Textbox(
@@ -475,25 +458,25 @@ with gr.Blocks(css=custom_css) as demo:
             placeholder="Wprowadź swoją wiadomość...",
             lines=1
         )
-    
+
     # Przycisk Wyślij i Wyczyść
     with gr.Row():
         submit_button = gr.Button("🚀 Wyślij", variant="primary")
         clear_button = gr.Button("🧹 Wyczyść Chat", variant="secondary")
-    
+
     # Panel Informacyjny
     info_panel = gr.Markdown(
         value="**Informacje:**\nCzas myślenia i inne dane będą tutaj wyświetlane.",
         elem_id="info-panel"
     )
-    
+
     # Akcje przycisków
     clear_button.click(
         fn=lambda: ([], "", "**Informacje:**\nCzas myślenia i inne dane zostały zresetowane."),
         inputs=None,
         outputs=[chatbot, msg, info_panel]
     )
-    
+
     # Przesyłanie wiadomości poprzez Enter lub kliknięcie przycisku Wyślij
     msg.submit(
         fn=generate,
@@ -505,6 +488,6 @@ with gr.Blocks(css=custom_css) as demo:
         inputs=[msg, chatbot, model, thinking_budget, gr.State()],
         outputs=[chatbot, msg, info_panel]
     )
-    
+
 # Uruchomienie aplikacji Gradio na Hugging Face Spaces
 demo.launch(share=False, show_api=False)