Update src/App.js

src/App.js

@@ -1,25 +1,77 @@
+import React, { useState } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
+  const [ticker, setTicker] = useState('GOOGL'); // Default ticker
+  const [prediction, setPrediction] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleForecast = async () => {
+    setIsLoading(true);
+    setError('');
+    setPrediction('');
+
+    try {
+      // The Gradio API endpoint is at /run/predict
+      const response = await fetch('/run/predict', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // The data payload must be in this specific format for Gradio
+        body: JSON.stringify({
+          data: [ticker],
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      
+      // The prediction is in the 'data' array of the response
+      const forecastText = result.data[0];
+      setPrediction(forecastText);
+
+    } catch (err) {
+      console.error("Failed to fetch prediction:", err);
+      setError('Failed to get forecast. Check the ticker or try again later.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <h1>Stock Forecaster</h1>
+        <p>Enter a stock ticker (e.g., AAPL, GOOGL, TSLA) to predict the next day's closing price.</p>
+        
+        <div className="input-container">
+          <input
+            type="text"
+            value={ticker}
+            onChange={(e) => setTicker(e.target.value.toUpperCase())}
+            placeholder="Enter Ticker"
+            className="ticker-input"
+          />
+          <button onClick={handleForecast} disabled={isLoading} className="forecast-button">
+            {isLoading ? 'Forecasting...' : 'Get Forecast'}
+          </button>
+        </div>
+
+        {error && <p className="error-message">{error}</p>}
+        
+        {prediction && (
+          <div className="prediction-result">
+            <pre>{prediction}</pre>
+          </div>
+        )}
       </header>
     </div>
   );
 }
 
-export default App;
+export default App;