Update app.py

app.py

@@ -289,42 +289,45 @@ custom_css = """
 
 .features-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 20px;
-    margin: 20px 0;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+    margin: 15px 0;
 }
 
 .feature-card {
     background: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    padding: 15px;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
+    text-align: center;
 }
 
 .feature-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    transform: translateY(-3px);
+    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
     border-color: var(--primary-color);
 }
 
 .feature-icon {
-    font-size: 28px;
-    margin-bottom: 15px;
+    font-size: 24px;
+    margin-bottom: 10px;
     color: var(--primary-color);
 }
 
 .feature-card h3 {
     color: var(--text-color);
-    margin: 10px 0;
-    font-size: 1.1em;
+    margin: 8px 0;
+    font-size: 0.95em;
+    font-weight: 600;
 }
 
 .feature-card p {
     color: #666;
-    font-size: 0.9em;
-    line-height: 1.4;
+    font-size: 0.8em;
+    line-height: 1.3;
+    margin: 5px 0;
 }
 
 .features-summary {
@@ -502,80 +505,47 @@ with gr.Blocks(title="Advanced Text Processing with Qwen", css=custom_css, theme
                 <div class="feature-card">
                     <div class="feature-icon">🔄</div>
                     <h3>Text Similarity</h3>
-                    <p>Compare semantic meaning between texts</p>
+                    <p>Compare text meanings</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🔍</div>
                     <h3>Semantic Search</h3>
-                    <p>Find relevant documents by meaning</p>
+                    <p>Find relevant docs</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">📊</div>
                     <h3>Batch Analysis</h3>
-                    <p>Process multiple texts simultaneously</p>
+                    <p>Process multiple texts</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🎯</div>
-                    <h3>Multi-Query Retrieval</h3>
-                    <p>Match queries with relevant documents</p>
+                    <h3>Multi-Query</h3>
+                    <p>Advanced retrieval</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🌐</div>
                     <h3>Cross-Lingual</h3>
-                    <p>Match meaning across languages</p>
+                    <p>Cross-language match</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🏷️</div>
-                    <h3>Text Classification</h3>
-                    <p>Categorize text into predefined classes</p>
+                    <h3>Classification</h3>
+                    <p>Categorize texts</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🔮</div>
-                    <h3>Document Clustering</h3>
-                    <p>Group similar documents together</p>
+                    <h3>Clustering</h3>
+                    <p>Group documents</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">😊</div>
-                    <h3>Sentiment Analysis</h3>
-                    <p>Analyze emotional content in text</p>
+                    <h3>Sentiment</h3>
+                    <p>Analyze emotions</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">🎨</div>
-                    <h3>Concept Extraction</h3>
-                    <p>Identify key themes and topics</p>
-                </div>
-            </div>
-            
-            <div class="features-summary">
-                <h2>Advanced Features</h2>
-                <div class="feature-list">
-                    <div class="feature-group">
-                        <h3>Text Analysis</h3>
-                        <ul>
-                            <li>Semantic similarity scoring</li>
-                            <li>Cross-language understanding</li>
-                            <li>Batch text processing</li>
-                            <li>Emotion detection</li>
-                        </ul>
-                    </div>
-                    <div class="feature-group">
-                        <h3>Document Processing</h3>
-                        <ul>
-                            <li>Smart document search</li>
-                            <li>Automated clustering</li>
-                            <li>Theme extraction</li>
-                            <li>Content categorization</li>
-                        </ul>
-                    </div>
-                    <div class="feature-group">
-                        <h3>Model Configuration</h3>
-                        <ul>
-                            <li>Adjustable embedding dimensions</li>
-                            <li>GPU acceleration support</li>
-                            <li>Batch size optimization</li>
-                            <li>Multi-language support</li>
-                        </ul>
-                    </div>
+                    <h3>Concepts</h3>
+                    <p>Extract themes</p>
                 </div>
             </div>
             """)