Update app.py

app.py

@@ -42,7 +42,6 @@ def respond(message, chat_history, model, system_prompt, thinking_budget, api_ke
         completion = client.chat.completions.create(model=model, messages=messages)
         response = completion.choices[0].message.content
         thinking_time = time.time() - start_time
-        # Jeśli API zwraca liczbę tokenów, można je tutaj dodać
         tokens_used = completion.usage.total_tokens if hasattr(completion, 'usage') else 'N/A'
         return response, thinking_time, tokens_used
     except Exception as e:
@@ -164,9 +163,9 @@ To provide the most comprehensive and well-thought-out answers, follow this enha
 custom_css = """
 /* Ogólne tło aplikacji */
 body {
-    background-color: #FFFFFF; /* Jasne tło */
+    background-color: #1e293b; /* Ciemne tło pasujące do karty */
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: #333333; /* Ciemny kolor tekstu dla kontrastu */
+    color: #cbd5e1; /* Jasny kolor tekstu dla kontrastu */
 }
 
 /* Główny kontener */
@@ -179,29 +178,29 @@ body {
 
 /* Nagłówek */
 h1, .gr-markdown h1 {
-    color: #4A90E2; /* Niebieski kolor nagłówka */
+    color: #60a5fa; /* Niebieski kolor nagłówka */
     text-align: center;
     margin-bottom: 10px;
     font-size: 2.5em;
 }
 
 h2, .gr-markdown h2 {
-    color: #333333;
+    color: #cbd5e1;
 }
 
 /* Karty i panele */
 #component-0, #component-1, #component-2, #component-3, #component-4, #component-5 {
-    background-color: #F9F9F9; /* Jasne tło dla boxów */
+    background-color: #334155; /* Zamiana na ciemniejsze tło */
     border-radius: 12px;
     padding: 20px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Większy kontrast dla ciemnego tła */
     margin-bottom: 20px;
-    width: 100%; /* Rozciągnięcie na całą szerokość */
+    width: 100%;
 }
 
 /* Przycisk Wyślij */
 button.primary {
-    background-color: #4A90E2;
+    background-color: #60a5fa;
     color: #FFFFFF;
     border: none;
     border-radius: 8px;
@@ -213,12 +212,12 @@ button.primary {
 }
 
 button.primary:hover {
-    background-color: #357AB8;
+    background-color: #3b82f6;
 }
 
 /* Przycisk Wyczyść */
 button.secondary {
-    background-color: #6C757D;
+    background-color: #64748b;
     color: #FFFFFF;
     border: none;
     border-radius: 8px;
@@ -230,25 +229,25 @@ button.secondary {
 }
 
 button.secondary:hover {
-    background-color: #5A6268;
+    background-color: #475569;
 }
 
 /* Pole tekstowe wiadomości */
 textarea {
-    background-color: #FFFFFF;
-    border: 1px solid #CED4DA;
+    background-color: #1e293b;
+    border: 1px solid #64748b;
     border-radius: 8px;
     padding: 12px;
     font-size: 16px;
     resize: none;
     transition: border-color 0.3s ease;
-    color: #333333;
+    color: #cbd5e1;
 }
 
 textarea:focus {
-    border-color: #4A90E2;
+    border-color: #60a5fa;
     outline: none;
-    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
+    box-shadow: 0 0 5px rgba(96, 165, 250, 0.5);
 }
 
 /* Chatbot */
@@ -256,37 +255,179 @@ textarea:focus {
     height: 600px;
     overflow-y: auto;
     padding: 10px;
-    border: 1px solid #CED4DA;
+    border: 1px solid #64748b;
     border-radius: 8px;
-    background-color: #FFFFFF;
-    color: #333333;
+    background-color: #1e293b;
+    color: #cbd5e1;
 }
 
 /* Panel Informacyjny */
 #info-panel {
-    background-color: #F1F1F1;
-    border: 1px solid #CED4DA;
+    background-color: #334155;
+    border: 1px solid #64748b;
     border-radius: 8px;
     padding: 15px;
     font-size: 14px;
-    color: #333333;
+    color: #cbd5e1;
 }
 
 /* Linki */
 a {
-    color: #4A90E2;
+    color: #60a5fa;
     text-decoration: none;
 }
 
 a:hover {
     text-decoration: underline;
 }
+
+/* Style dla Karty */
+.custom-card {
+    position: relative;
+    border-radius: 0.75rem; /* Rounded-lg */
+    background-color: #1e293b; /* bg-slate-900 */
+    padding: 0.5rem;
+    color: #cbd5e1; /* text-slate-500 */
+    margin-bottom: 20px;
+}
+
+.custom-card-header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 0.75rem; /* text-xs */
+    color: #cbd5e1; /* text-slate-500 */
+}
+
+.icon-group {
+    display: flex;
+    padding-left: 0.875rem; /* pl-3.5 */
+    padding-top: 0.75rem; /* pt-3 */
+}
+
+.icon {
+    margin-left: -0.125rem; /* -ml-0.5 */
+    margin-right: 0.375rem; /* mr-1.5 */
+    height: 0.75rem; /* h-3 */
+    width: 0.75rem; /* w-3 */
+}
+
+.icon.red {
+    color: rgba(239, 68, 68, 0.2); /* text-red-500/20 */
+}
+
+.icon.yellow {
+    color: rgba(234, 179, 8, 0.2); /* text-yellow-500/20 */
+}
+
+.icon.green {
+    color: rgba(34, 197, 94, 0.2); /* text-green-500/20 */
+}
+
+.file-name {
+    position: absolute;
+    top: 0.5rem; /* top-2 */
+    left: 0;
+    right: 0;
+    font-size: 0.75rem; /* text-xs */
+    color: #94a3b8; /* text-slate-500 */
+}
+
+.custom-card-body {
+    margin-top: 1.25rem; /* mt-5 */
+    padding-left: 1.25rem; /* px-5 */
+    padding-bottom: 2.5rem; /* pb-10 */
+    /* space-y-1.5 nie jest bezpośrednio wspierane w CSS, użyj odstępów między elementami */
+}
+
+.code-line {
+    font-family: monospace;
+    font-size: 0.75rem; /* text-xs */
+    font-weight: normal;
+    letter-spacing: 0.05em; /* tracking-wide */
+    color: #a78bfa; /* text-violet-400 */
+    margin-top: 1rem; /* mt-4 dla pierwszej linii, dostosuj w razie potrzeby */
+}
+
+.text-slate {
+    color: #64748b; /* text-slate-500 */
+}
+
+.text-pink {
+    color: #ec4899; /* text-pink-400 */
+}
+
+.highlight {
+    position: relative;
+    display: inline-block;
+    padding-left: 0.25rem; /* px-1 */
+    padding-right: 0.25rem;
+    background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 */
+    color: #60a5fa; /* text-blue-400 */
+}
+
+.text-blue {
+    color: #60a5fa; /* text-blue-400 */
+}
 """
 
 # Tworzenie interfejsu Gradio z niestandardowym CSS
 with gr.Blocks(css=custom_css) as demo:
-    # Nagłówek
+    # Nagłówek "Cards"
+    gr.HTML("""
+    <div class="custom-card">
+      <div class="custom-card-header">
+        <div class="icon-group">
+          <svg viewBox="0 0 24 24" fill="currentColor" class="icon red">
+            <circle r="12" cy="12" cx="12"></circle>
+          </svg>
+          <svg viewBox="0 0 24 24" fill="currentColor" class="icon yellow">
+            <circle r="12" cy="12" cx="12"></circle>
+          </svg>
+          <svg viewBox="0 0 24 24" fill="currentColor" class="icon green">
+            <circle r="12" cy="12" cx="12"></circle>
+          </svg>
+        </div>
+        <span class="file-name">ProgressBar.tsx</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>
+        </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>
+        </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>
+        </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>
+        </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>
+        </p>
+        <p class="code-line">
+          <span class="text-slate">&lt;/</span><span class="text-pink">Flex</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>
+        <p class="code-line">
+          <span class="text-slate">&lt;/</span><span class="text-pink">Card</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ę.
 
@@ -296,7 +437,7 @@ with gr.Blocks(css=custom_css) as demo:
     - **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
     with gr.Row():
         with gr.Column(scale=1):
@@ -315,7 +456,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",
@@ -326,7 +467,7 @@ with gr.Blocks(css=custom_css) as demo:
         layout="vertical",
         height=600
     )
-
+    
     # Pole do wpisywania wiadomości
     with gr.Row():
         msg = gr.Textbox(
@@ -334,38 +475,36 @@ 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,
-        inputs=[msg, chatbot, model, thinking_budget],
+        inputs=[msg, chatbot, model, thinking_budget, gr.State()],
         outputs=[chatbot, msg, info_panel]
     )
     submit_button.click(
         fn=generate,
-        inputs=[msg, chatbot, model, thinking_budget],
+        inputs=[msg, chatbot, model, thinking_budget, gr.State()],
         outputs=[chatbot, msg, info_panel]
     )
-
-    # Usunięcie Stopki (brak kodu dla stopki)
-
+    
 # Uruchomienie aplikacji Gradio na Hugging Face Spaces
 demo.launch(share=False, show_api=False)