Update src/App.js

src/App.js

@@ -1,77 +1,31 @@
-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);
-    }
+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);
   };
 
   return (
-    <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 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>
   );
 }
-
-export default App;