Update src/App.js

src/App.js

@@ -1,31 +1,77 @@
-import React, { useState } from "react";
-
-export default function App() {
-  const [input, setInput] = useState("");
-  const [prediction, setPrediction] = useState("");
-
-  const handlePredict = async () => {
-    const res = await fetch("/api/predict", {
-      method: "POST",
-      body: JSON.stringify({ input }),
-      headers: { "Content-Type": "application/json" }
-    });
-    const data = await res.json();
-    setPrediction(data.prediction);
+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 style={{ padding: "2rem", fontFamily: "sans-serif" }}>
-      <h1>Stock Price Forecaster (LSTM)</h1>
-      <input
-        type="text"
-        placeholder="Enter Ticker or Company Name"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        style={{ padding: "0.5rem", width: "300px" }}
-      />
-      <button onClick={handlePredict} style={{ marginLeft: "1rem", padding: "0.5rem" }}>Predict</button>
-      {prediction && <p>Predicted Next Day Close: ${prediction}</p>}
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <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;