Update frontend/src/App.jsx

frontend/src/App.jsx

@@ -1,111 +1,77 @@
-import React, { useState } from 'react';
-import Plot from 'react-plotly.js';
+import { useState } from 'react'
 
 function App() {
-  const [snr, setSnr] = useState(20);
-  const [message, setMessage] = useState("Critical satellite telemetry data sequence initialized.");
-  const [results, setResults] = useState(null);
-  const [loading, setLoading] = useState(false);
+  const [inputText, setInputText]] = useState("Critical satellite telemetry data sequence initialized.")
+  const [corruptedText, setCorruptedText] = useState("")
+  const [decodedText, setDecodedText] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  const handleTransmit = async () => {
+    setLoading(true)
+    setCorruptedText("")
+    setDecodedText("")
 
-  const runSimulation = async () => {
-    setLoading(true);
     try {
-      const response = await fetch('/api/simulate', {
+      // 1. Send your custom text to the backend
+      const response = await fetch('/api/transmit', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ snr_db: parseFloat(snr), message })
-      });
-      const data = await response.json();
-      setResults(data);
-    } catch (err) {
-      console.error(err);
+        body: JSON.stringify({ text: inputText })
+      })
+      
+      const data = await response.json()
+      
+      // 2. Display the results
+      setCorruptedText(data.corrupted)
+      setDecodedText(data.decoded)
+    } catch (error) {
+      setDecodedText("Error connecting to the server.")
     }
-    setLoading(false);
-  };
+    setLoading(false)
+  }
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-8">
-      <h1 className="text-4xl font-bold mb-8 border-b border-gray-700 pb-4">
-        Neural-Link: Generative Signal Recovery
-      </h1>
-      
-      <div className="grid grid-cols-2 gap-8">
-        <div className="bg-gray-800 p-6 rounded-lg shadow-xl border border-gray-700">
-          <h2 className="text-2xl mb-4 font-semibold text-blue-400">Transmission Parameters</h2>
-          
-          <label className="block mb-2 font-mono text-sm">Target Semantic Intent:</label>
-          <input 
-            type="text" 
-            value={message} 
-            onChange={e => setMessage(e.target.value)}
-            className="w-full p-3 text-black rounded mb-6 font-mono"
-          />
-          
-          <label className="block mb-2 font-mono text-sm text-yellow-400">
-            Channel Condition (SNR): {snr} dB
-          </label>
-          <input 
-            type="range" min="-5" max="30" step="1" 
-            value={snr} onChange={e => setSnr(e.target.value)}
-            className="w-full mb-8 cursor-pointer"
+    <div className="min-h-screen bg-gray-900 text-white p-8 font-sans">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <h1 className="text-3xl font-bold text-blue-400">🧠 6G Semantic Decoder</h1>
+        
+        {/* The New Text Input Box */}
+        <div className="space-y-2">
+          <label className="text-sm text-gray-400">Message to Transmit:</label>
+          <textarea 
+            className="w-full p-3 bg-gray-800 rounded border border-gray-700 text-white"
+            rows="3"
+            value={inputText}
+            onChange={(e) => setInputText(e.target.value)}
           />
-          
-          <button 
-            onClick={runSimulation}
-            className="bg-blue-600 hover:bg-blue-500 transition-colors px-6 py-3 rounded font-bold w-full text-lg tracking-wide"
-            disabled={loading}
-          >
-            {loading ? "Simulating Physical Channel..." : "Transmit Signal"}
-          </button>
-
-          {results && (
-            <div className="mt-8 space-y-4">
-              <div className="p-4 bg-red-900/30 border-l-4 border-red-500 rounded">
-                <h3 className="font-bold text-red-400 text-sm tracking-wider uppercase mb-1">Traditional PHY Decoder</h3>
-                <p className="font-mono text-gray-300">{results.corrupted_message}</p>
-              </div>
-              <div className="p-4 bg-green-900/30 border-l-4 border-green-500 rounded">
-                <h3 className="font-bold text-green-400 text-sm tracking-wider uppercase mb-1">AI Semantic Recovery</h3>
-                <p className="font-mono text-white">{results.recovered_message}</p>
-              </div>
-            </div>
-          )}
         </div>
 
-        <div className="bg-gray-800 p-6 rounded-lg shadow-xl border border-gray-700 flex justify-center items-center">
-          {results ? (
-            <Plot
-              data={[
-                {
-                  x: results.constellation.ideal_i,
-                  y: results.constellation.ideal_q,
-                  mode: 'markers', type: 'scatter', name: 'Ideal Map',
-                  marker: { color: '#60A5FA', size: 8, symbol: 'cross' }
-                },
-                {
-                  x: results.constellation.noisy_i,
-                  y: results.constellation.noisy_q,
-                  mode: 'markers', type: 'scatter', name: 'Received Noise',
-                  marker: { color: 'rgba(239, 68, 68, 0.6)', size: 5 }
-                }
-              ]}
-              layout={{
-                width: 500, height: 500,
-                title: 'Real-Time 16-QAM Constellation',
-                paper_bgcolor: 'transparent', plot_bgcolor: 'transparent',
-                font: { color: 'white', family: 'monospace' },
-                xaxis: { range: [-5, 5], gridcolor: '#374151', zerolinecolor: '#4B5563' },
-                yaxis: { range: [-5, 5], gridcolor: '#374151', zerolinecolor: '#4B5563' },
-                showlegend: true, legend: { orientation: 'h', y: -0.2 }
-              }}
-            />
-          ) : (
-            <div className="text-gray-500 font-mono animate-pulse">Awaiting Signal Transmission...</div>
-          )}
-        </div>
+        <button 
+          onClick={handleTransmit}
+          disabled={loading}
+          className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded transition-colors"
+        >
+          {loading ? "Transmitting..." : "Transmit Message"}
+        </button>
+
+        {/* Display the Corrupted Text */}
+        {corruptedText && (
+          <div className="p-4 bg-red-900/30 border border-red-700 rounded">
+            <h3 className="text-red-400 text-sm font-bold mb-1">Traditional PHY Decoder (Noisy):</h3>
+            <p className="font-mono">{corruptedText}</p>
+          </div>
+        )}
+
+        {/* Display the AI Decoded Text */}
+        {decodedText && (
+          <div className="p-4 bg-green-900/30 border border-green-700 rounded">
+            <h3 className="text-green-400 text-sm font-bold mb-1">AI Semantic Recovery:</h3>
+            <p className="font-mono">{decodedText}</p>
+          </div>
+        )}
       </div>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App