Spaces:

LeonardoMdSA
/

Context-aware-NLP-classification-platform-with-MCP

Running

LeonardoMdSA commited on 17 days ago

Commit

84df6bb

1 Parent(s): a9aac31

UI final touches

Files changed (2) hide show

ui/static/style.css CHANGED Viewed

@@ -1,49 +1,64 @@
 body {
-    font-family: Arial, sans-serif;
-    background-color: #f9f9f9;
     color: #333;
     margin: 0;
     padding: 0;
 }
 .container {
-    max-width: 800px;
     margin: 50px auto;
-    padding: 20px;
     background-color: #fff;
-    box-shadow: 0 0 15px rgba(0,0,0,0.1);
-    border-radius: 8px;
 }
-h1, h2 {
-    text-align: center;
 }
-.input-section {
-    margin-bottom: 20px;
 }
 textarea {
     width: 100%;
-    height: 100px;
-    padding: 10px;
     font-size: 16px;
     margin-top: 5px;
-    border-radius: 5px;
     border: 1px solid #ccc;
     resize: vertical;
 }
 button {
     display: block;
     margin: 15px auto 0 auto;
-    padding: 10px 20px;
     font-size: 16px;
     background-color: #4a90e2;
     color: #fff;
     border: none;
-    border-radius: 5px;
     cursor: pointer;
 }
 button:hover {
@@ -53,12 +68,13 @@ button:hover {
 .output-section pre {
     background-color: #f0f0f0;
     padding: 15px;
-    border-radius: 5px;
-    min-height: 50px;
     overflow-x: auto;
 }
-textarea::placeholder {
-    color: #888;
-    opacity: 0.7;
 }

 body {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    background-color: #f4f6f8;
     color: #333;
     margin: 0;
     padding: 0;
 }
 .container {
+    max-width: 900px;
     margin: 50px auto;
+    padding: 30px;
     background-color: #fff;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    border-radius: 10px;
+    text-align: center;
 }
+h1 {
+    margin-bottom: 5px;
+}
+.subtitle {
+    margin-top: 0;
+    font-weight: normal;
+    color: #666;
 }
+.input-section, .output-section {
+    margin: 20px 0;
+    text-align: left;
 }
 textarea {
     width: 100%;
+    height: 120px;
+    padding: 12px;
     font-size: 16px;
     margin-top: 5px;
+    border-radius: 6px;
     border: 1px solid #ccc;
     resize: vertical;
+    box-sizing: border-box;
+}
+textarea::placeholder {
+    color: #888;
+    opacity: 0.7;
 }
 button {
     display: block;
     margin: 15px auto 0 auto;
+    padding: 12px 24px;
     font-size: 16px;
     background-color: #4a90e2;
     color: #fff;
     border: none;
+    border-radius: 6px;
     cursor: pointer;
+    transition: background-color 0.2s ease;
 }
 button:hover {
 .output-section pre {
     background-color: #f0f0f0;
     padding: 15px;
+    border-radius: 6px;
+    min-height: 70px;
     overflow-x: auto;
 }
+footer {
+    margin-top: 40px;
+    font-size: 14px;
+    color: #999;
 }

ui/templates/index.html CHANGED Viewed

@@ -2,25 +2,30 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Context-aware NLP Classification with MCP</title>
-    <link rel="stylesheet" href="/static/style.css?v=1.0.3">
 </head>
 <body>
     <div class="container">
-        <h1>Context-aware NLP Classification Platform</h1>
         <div class="input-section">
             <label for="query">Enter text for classification:</label>
-            <textarea id="query" placeholder="e.g. Policy update regarding mandatory cybersecurity training => hr.policy;
-Consulting agreement with Company Z => legal.contract;
-Monthly invoice for consulting services, May 2025 => finance.invoice."></textarea>
             <button onclick="sendQuery()">Submit</button>
         </div>
-        <div class="output-section">
-            <h2>Prediction Result:</h2>
-            <pre id="result">Waiting for input...</pre>
-        </div>
     </div>
     <script src="/static/script.js"></script>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Context-aware NLP Classification Platform with MCP</title>
+    <link rel="stylesheet" href="/static/style.css?v=1.0.4">
 </head>
 <body>
     <div class="container">
+        <h1>Context-aware NLP Classification Platform with MCP</h1>
+        <h3 class="subtitle">Multi-domain classification (finance, HR, legal).</h3>
+        <div class="output-section">
+            <h2>Prediction Result:</h2>
+            <pre id="result">Waiting for input...</pre>
+        </div>
         <div class="input-section">
             <label for="query">Enter text for classification:</label>
+            <textarea id="query" placeholder="e.g. Policy update regarding mandatory cybersecurity training
+Consulting agreement with Company Z
+Monthly invoice for consulting services, May 2025"></textarea>
             <button onclick="sendQuery()">Submit</button>
         </div>
+        <footer>
+            <p>Made with FastAPI & Python 3.13 — Context-aware NLP with MCP & TF-IDF.</p>
+        </footer>
     </div>
     <script src="/static/script.js"></script>