Update app.py

app.py

@@ -166,6 +166,8 @@ body {
     background-color: #1e293b; /* Ciemne tło pasujące do karty */
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: #cbd5e1; /* Jasny kolor tekstu dla kontrastu */
+    margin: 0;
+    padding: 0;
 }
 
 /* Główny kontener */
@@ -174,18 +176,20 @@ body {
     margin: auto;
     padding: 20px;
     width: 100%; /* Rozciągnięcie na całą szerokość */
+    box-sizing: border-box;
 }
 
 /* Nagłówek */
 h1, .gr-markdown h1 {
     color: #60a5fa; /* Niebieski kolor nagłówka */
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     font-size: 2.5em;
 }
 
 h2, .gr-markdown h2 {
     color: #cbd5e1;
+    margin-top: 1.5em;
 }
 
 /* Karty i panele */
@@ -196,6 +200,7 @@ h2, .gr-markdown h2 {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Większy kontrast dla ciemnego tła */
     margin-bottom: 20px;
     width: 100%;
+    box-sizing: border-box;
 }
 
 /* Przycisk Wyślij */
@@ -209,6 +214,8 @@ button.primary {
     cursor: pointer;
     transition: background-color 0.3s ease;
     width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 10px;
 }
 
 button.primary:hover {
@@ -226,6 +233,7 @@ button.secondary {
     cursor: pointer;
     transition: background-color 0.3s ease;
     width: 100%;
+    box-sizing: border-box;
 }
 
 button.secondary:hover {
@@ -233,7 +241,7 @@ button.secondary:hover {
 }
 
 /* Pole tekstowe wiadomości */
-textarea {
+textarea, input[type="text"] {
     background-color: #1e293b;
     border: 1px solid #64748b;
     border-radius: 8px;
@@ -242,9 +250,11 @@ textarea {
     resize: none;
     transition: border-color 0.3s ease;
     color: #cbd5e1;
+    width: 100%;
+    box-sizing: border-box;
 }
 
-textarea:focus {
+textarea:focus, input[type="text"]:focus {
     border-color: #60a5fa;
     outline: none;
     box-shadow: 0 0 5px rgba(96, 165, 250, 0.5);
@@ -259,6 +269,7 @@ textarea:focus {
     border-radius: 8px;
     background-color: #1e293b;
     color: #cbd5e1;
+    box-sizing: border-box;
 }
 
 /* Panel Informacyjny */
@@ -269,6 +280,8 @@ textarea:focus {
     padding: 15px;
     font-size: 14px;
     color: #cbd5e1;
+    box-sizing: border-box;
+    margin-top: 20px;
 }
 
 /* Linki */
@@ -286,11 +299,14 @@ a:hover {
     position: relative;
     border-radius: 0.75rem; /* Rounded-lg */
     background-color: #1e293b; /* bg-slate-900 */
-    padding: 0.5rem;
+    padding: 1rem;
     color: #cbd5e1; /* text-slate-500 */
     margin-bottom: 20px;
+    box-sizing: border-box;
+    width: 100%;
 }
 
+/* Header Karty */
 .custom-card-header {
     position: relative;
     display: flex;
@@ -299,14 +315,18 @@ a:hover {
     text-align: center;
     font-size: 0.75rem; /* text-xs */
     color: #cbd5e1; /* text-slate-500 */
+    margin-bottom: 1rem;
 }
 
+/* Grupa ikon w nagłówku */
 .icon-group {
     display: flex;
     padding-left: 0.875rem; /* pl-3.5 */
     padding-top: 0.75rem; /* pt-3 */
+    margin-right: 0.5rem;
 }
 
+/* Style ikon */
 .icon {
     margin-left: -0.125rem; /* -ml-0.5 */
     margin-right: 0.375rem; /* mr-1.5 */
@@ -315,17 +335,18 @@ a:hover {
 }
 
 .icon.red {
-    color: rgba(239, 68, 68, 0.2); /* text-red-500/20 */
+    color: rgba(239, 68, 68, 0.8); /* text-red-500/80 */
 }
 
 .icon.yellow {
-    color: rgba(234, 179, 8, 0.2); /* text-yellow-500/20 */
+    color: rgba(234, 179, 8, 0.8); /* text-yellow-500/80 */
 }
 
 .icon.green {
-    color: rgba(34, 197, 94, 0.2); /* text-green-500/20 */
+    color: rgba(34, 197, 94, 0.8); /* text-green-500/80 */
 }
 
+/* Nazwa pliku w nagłówku */
 .file-name {
     position: absolute;
     top: 0.5rem; /* top-2 */
@@ -335,6 +356,7 @@ a:hover {
     color: #94a3b8; /* text-slate-500 */
 }
 
+/* Body karty */
 .custom-card-body {
     margin-top: 1.25rem; /* mt-5 */
     padding-left: 1.25rem; /* px-5 */
@@ -342,15 +364,17 @@ a:hover {
     /* space-y-1.5 nie jest bezpośrednio wspierane w CSS, użyj odstępów między elementami */
 }
 
+/* Linie kodu w karcie */
 .code-line {
-    font-family: monospace;
-    font-size: 0.75rem; /* text-xs */
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.85rem; /* Slightly larger for readability */
     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 */
+    margin-top: 0.5rem; /* mt-2 dla lepszej czytelności */
 }
 
+/* Kolory tekstu */
 .text-slate {
     color: #64748b; /* text-slate-500 */
 }
@@ -362,14 +386,44 @@ a:hover {
 .highlight {
     position: relative;
     display: inline-block;
-    padding-left: 0.25rem; /* px-1 */
-    padding-right: 0.25rem;
+    padding: 0.25rem 0.5rem; /* px-1 */
     background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 */
     color: #60a5fa; /* text-blue-400 */
+    border-radius: 4px;
 }
 
-.text-blue {
-    color: #60a5fa; /* text-blue-400 */
+/* Responsive Design */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px;
+    }
+
+    h1, .gr-markdown h1 {
+        font-size: 2em;
+    }
+
+    .custom-card {
+        padding: 0.75rem;
+    }
+
+    .custom-card-body {
+        padding-left: 0.75rem;
+        padding-bottom: 1.5rem;
+    }
+
+    .code-line {
+        font-size: 0.75rem;
+    }
+
+    button.primary, button.secondary {
+        padding: 10px 20px;
+        font-size: 14px;
+    }
+
+    textarea, input[type="text"] {
+        font-size: 14px;
+        padding: 10px;
+    }
 }
 """
 
@@ -403,16 +457,16 @@ with gr.Blocks(css=custom_css) as demo:
           <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">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>
+          <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">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>
+          <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" 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>
+          <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" 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>
+          <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">Features</span><span class="text-slate">&gt;</span>
@@ -421,7 +475,21 @@ with gr.Blocks(css=custom_css) as demo:
     </div>
     """)
 
-    # Sekcja wyboru modelu i budżetu myślenia
+    # 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
     with gr.Row():
         with gr.Column(scale=1):
             model = gr.Dropdown(
@@ -459,7 +527,7 @@ with gr.Blocks(css=custom_css) as demo:
             lines=1
         )
 
-    # Przycisk Wyślij i Wyczyść
+      # Przycisk Wyślij i Wyczyść
     with gr.Row():
         submit_button = gr.Button("🚀 Wyślij", variant="primary")
         clear_button = gr.Button("🧹 Wyczyść Chat", variant="secondary")