Update src/App.js

src/App.js

@@ -1,77 +1,299 @@
-import React, { useState } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+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('');
+// 🧩 Company-to-Ticker mapping
+const companyToTicker = {
+  "Agilent Technologies, Inc.": "A",
+  "AAALY": "AAALY",
+  "AAC": "AAC",
+  "AAC Technologies Holdings Inc.": "AACAY",
+  "American Airlines Group Inc.": "AAL",
+  "Atlantic American Corporation": "AAME",
+  "Applied Optoelectronics, Inc.": "AAOI",
+  "AAON, Inc.": "AAON",
+  "Advance Auto Parts, Inc.": "AAP",
+  "Apple Inc.": "AAPL",
+  "American Assets Trust, Inc.": "AAT",
+  "AAVL": "AAVL",
+  "AAWW": "AAWW",
+  "AllianceBernstein Holding L.P.": "AB",
+  "AbbVie Inc.": "ABBV",
+  "ABC": "ABC",
+  "Ameris Bancorp": "ABCB",
+  "Cambium Learning Group, Inc.": "ABCD",
+  "ABCO": "ABCO",
+  "Asbury Automotive Group, Inc.": "ABG",
+  "ABIO": "ABIO",
+  "American Biltrite Inc.": "ABLT",
+  "ABM Industries Incorporated": "ABM",
+  "ABMD": "ABMD",
+  "Arbor Realty Trust, Inc.": "ABR",
+  "Abbott Laboratories": "ABT",
+  "Aboitiz Equity Ventures, Inc.": "ABTZY",
+  "ACADIA Pharmaceuticals Inc.": "ACAD",
+  "Accor SA": "ACCYY",
+  "Air Canada": "ACDVF",
+  "Adicet Bio, Inc.": "ACET",
+  "ACFC": "ACFC",
+  "AMC Financial Holdings Inc.": "ACFL",
+  "Acorn Energy, Inc.": "ACFN",
+  "ACG": "ACG",
+  "Agricultural Bank of China Limited": "ACGBY",
+  "Arch Capital Group Ltd.": "ACGL",
+  "Acadia Healthcare Company, Inc.": "ACHC",
+  "ACHN": "ACHN",
+  "ACI Worldwide, Inc.": "ACIW",
+  "Axcelis Technologies, Inc.": "ACLS",
+  "Accenture plc": "ACN",
+  "ACNB Corporation": "ACNB",
+  "ACOR": "ACOR",
+  "Abrdn Income Credit Strategies Fund": "ACP",
+  "Ares Commercial Real Estate Corporation": "ACRE",
+  "ACRX": "ACRX",
+  "ACST": "ACST",
+  "Actua Corporation": "ACTA",
+  "Acacia Research Corporation": "ACTG",
+  "Acura Pharmaceuticals, Inc.": "ACUR",
+  "Acciona, S.A.": "ACXIF",
+  "Adobe Inc.": "ADBE",
+  "Agree Realty Corporation": "ADC",
+  "adidas AG": "ADDYY",
+  "Aida Engineering, Ltd.": "ADERY",
+  "ADES": "ADES",
+  "Analog Devices, Inc.": "ADI",
+  "Archer-Daniels-Midland Company": "ADM",
+  "ADMA Biologics, Inc.": "ADMA",
+  "ADMP": "ADMP",
+  "Automatic Data Processing, Inc.": "ADP",
+  "Adaptive Biotechnologies Corporation": "ADPT",
+  "Autodesk, Inc.": "ADSK",
+  "ADTRAN Holdings, Inc.": "ADTN",
+  "Addus HomeCare Corporation": "ADUS",
+  "Ayala Pharmaceuticals, Inc.": "ADXS",
+  "Ameren Corporation": "AEE",
+  "Aehr Test Systems, Inc.": "AEHR",
+  "Advanced Energy Industries, Inc.": "AEIS",
+  "AEL": "AEL",
+  "Adacel Technologies Limited": "AELTF",
+  "Agnico Eagle Mines Limited": "AEM",
+  "American Eagle Outfitters, Inc.": "AEO",
+  "American Electric Power Company, Inc.": "AEP",
+  "AerCap Holdings N.V.": "AER",
+  "AERI": "AERI",
+  "Aetna Inc.": "AET",
+  "AEY": "AEY",
+  "AEZS": "AEZS",
+  "AFAM": "AFAM",
+  "AllianceBernstein National Municipal Income Fund, Inc.": "AFB",
+  "Athens Bancshares Corporation": "AFCB",
+  "American Financial Group, Inc.": "AFG",
+  "Air France-KLM SA": "AFLYY",
+  "AFMD": "AFMD",
+  "AmTrust Financial Services, Inc.": "AFSI",
+  "AFT": "AFT",
+  "First Majestic Silver Corp.": "AG",
+  "Abrdn Global Dynamic Dividend Fund": "AGD",
+  "Agenus Inc.": "AGEN",
+  "Alamos Gold Inc.": "AGI",
+  "Agios Pharmaceuticals, Inc.": "AGIO",
+  "Federal Agricultural Mortgage Corporation": "AGM",
+  "AGNC Investment Corp.": "AGNC",
+  "Assured Guaranty Ltd.": "AGO",
+  "Agile Group Holdings Limited": "AGPYY",
+  "Adecoagro S.A.": "AGRO",
+  "AF Gruppen ASA": "AGRUF",
+  "AGRX": "AGRX",
+  "AGTC": "AGTC",
+  "Agilysys, Inc.": "AGYS",
+  "Aegean Airlines S.A.": "AGZNF",
+  "Anhui Conch Cement Company Limited": "AHCHY",
+  "AHGP": "AHGP",
+  "Armada Hoffler Properties, Inc.": "AHH",
+  "Asahi Kasei Corporation": "AHKSY",
+  "AHL": "AHL",
+  "Koninklijke Ahold Delhaize N.V.": "AHODF",
+  "AHPI": "AHPI",
+  "Ashford Hospitality Trust, Inc.": "AHT",
+  "C3.ai, Inc.": "AI",
+  "Aurubis AG": "AIAGF",
+  "AIF": "AIF",
+  "American International Group, Inc.": "AIG",
+  "AIMC": "AIMC",
+  "Albany International Corp.": "AIN",
+  "Airports of Thailand Public Company Limited": "AIPUY",
+  "Global X Artificial Intelligence & Technology ETF": "AIQ",
+  "Air Industries Group": "AIRI",
+  "Air T, Inc.": "AIRT",
+  "Applied Industrial Technologies, Inc.": "AIT",
+  "Apartment Investment and Management Company": "AIV",
+  "Assurant, Inc.": "AIZ",
+  "Arthur J. Gallagher & Co.": "AJG",
+  "Ajinomoto Co., Inc.": "AJINY",
+  "AJIS Co., Ltd.": "AJISF",
+  "Akamai Technologies, Inc.": "AKAM",
+  "Akebia Therapeutics, Inc.": "AKBA",
+  "Akbank T.A.S.": "AKBTY",
+  "Embotelladora Andina S.A.": "AKO-A",
+  "Acadia Realty Trust": "AKR",
+  "Akzo Nobel N.V.": "AKZOY",
+  "Albemarle Corporation": "ALB",
+  "Alpha Bank S.A.": "ALBKY",
+  "Alico, Inc.": "ALCO",
+  "Aldeyra Therapeutics, Inc.": "ALDX",
+  "Alexander & Baldwin, Inc.": "ALEX",
+  "Align Technology, Inc.": "ALGN",
+  "Allegiant Travel Company": "ALGT",
+  "ALIM": "ALIM",
+  "ALIOF": "ALIOF",
+  "Alaska Air Group, Inc.": "ALK",
+  "Alkermes plc": "ALKS",
+  "The Allstate Corporation": "ALL",
+  "Allegion plc": "ALLE",
+  "Allot Ltd.": "ALLT",
+  "Ally Financial Inc.": "ALLY",
+  "Alnylam Pharmaceuticals, Inc.": "ALNY",
+  "Analogic Corporation": "ALOG",
+  "Astellas Pharma Inc.": "ALPMY",
+  "ALR": "ALR",
+  "ALSD": "ALSD",
+  "Alstom SA": "ALSMY",
+  "Allison Transmission Holdings, Inc.": "ALSN",
+  "ALTR": "ALTR",
+  "Autoliv, Inc.": "ALV",
+  "Amadeus IT Group, S.A.": "AMADY",
+  "Applied Materials, Inc.": "AMAT",
+  "Ambarella, Inc.": "AMBA",
+  "Ambac Financial Group, Inc.": "AMBC",
+  "American Business Bank": "AMBZ",
+  "AMC Entertainment Holdings, Inc.": "AMC",
+  "Andatee China Marine Fuel Services Corporation": "AMCF",
+  "AMC Networks Inc.": "AMCX",
+  "Advanced Micro Devices, Inc.": "AMD",
+  "AMETEK, Inc.": "AME",
+  "Amedisys, Inc.": "AMED",
+  "Affiliated Managers Group, Inc.": "AMG",
+  "Amgen Inc.": "AMGN",
+  "American Homes 4 Rent": "AMH",
+  "Atrium Mortgage Investment Corporation": "AMIVF",
+  "A.P. Moller - Maersk A/S": "AMKBY",
+  "Amkor Technology, Inc.": "AMKR",
+  "AMNB": "AMNB",
+  "AMOT": "AMOT",
+  "Ameriprise Financial, Inc.": "AMP",
+  "Amphastar Pharmaceuticals, Inc.": "AMPH",
+  "Amarin Corporation plc": "AMRN",
+  "AMRS": "AMRS",
+  "American Superconductor Corporation": "AMSC",
+  "AMSWA": "AMSWA",
+  "American Tower Corporation": "AMT",
+  "AMTD IDEA Group": "AMTD",
+  "Aemetis, Inc.": "AMTX",
+  "American Woodmark Corporation": "AMWD",
+  "America Movil, S.A.B. de C.V.": "AMX",
+  "Amazon.com, Inc.": "AMZN",
+  "AutoNation, Inc.": "AN",
+  "ANAC": "ANAC",
+  "Anchor Bancorp": "ANCB",
+  "Access National Corporation": "ANCX",
+  "The Andersons, Inc.": "ANDE",
+  "Arista Networks Inc": "ANET",
+  "Abercrombie & Fitch Co.": "ANF",
+  "Angi Inc.": "ANGI",
+  "AngioDynamics, Inc.": "ANGO",
+  "Anika Therapeutics, Inc.": "ANIK",
+  "ANI Pharmaceuticals, Inc.": "ANIP",
+  "ANR": "ANR",
+  "Anthera Pharmaceuticals, Inc.": "ANTH",
+  "Sphere 3D Corp.": "ANY",
+  "Abrdn Total Dynamic Dividend Fund": "AOD",
+  "Aon plc": "AON"
+};
 
-  const handleForecast = async () => {
-    setIsLoading(true);
-    setError('');
-    setPrediction('');
+// 🧭 Reverse mapping (Ticker → Company)
+const tickerToCompany = Object.fromEntries(
+  Object.entries(companyToTicker).map(([k, v]) => [v, k])
+);
 
-    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],
-        }),
-      });
+function App() {
+  const [inputValue, setInputValue] = useState("");
+  const [ticker, setTicker] = useState("");
+  const [companyName, setCompanyName] = useState("");
+  const [forecast, setForecast] = useState("");
+  const [loading, setLoading] = useState(false);
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
+  // 🔍 Handle input (detect if company or ticker)
+  const handleInputChange = (e) => {
+    const value = e.target.value.trim();
+    setInputValue(value);
+
+    // Check if user entered a known company name
+    if (companyToTicker[value]) {
+      setTicker(companyToTicker[value]);
+      setCompanyName(value);
+    }
+    // Or if entered a known ticker
+    else if (tickerToCompany[value.toUpperCase()]) {
+      setTicker(value.toUpperCase());
+      setCompanyName(tickerToCompany[value.toUpperCase()]);
+    } else {
+      setTicker("");
+      setCompanyName("");
+    }
+  };
 
-      const result = await response.json();
-      
-      // The prediction is in the 'data' array of the response
-      const forecastText = result.data[0];
-      setPrediction(forecastText);
+  // 🚀 Call Gradio backend API
+  const handleForecast = async () => {
+    if (!ticker) {
+      setForecast("⚠️ Please enter a valid company name or ticker.");
+      return;
+    }
 
-    } catch (err) {
-      console.error("Failed to fetch prediction:", err);
-      setError('Failed to get forecast. Check the ticker or try again later.');
+    setLoading(true);
+    try {
+      const response = await fetch(
+        `${window.location.origin}/api/predict?ticker_symbol=${ticker}`
+      );
+      const data = await response.json();
+      setForecast(data || "No prediction result found.");
+    } catch (error) {
+      console.error(error);
+      setForecast("❌ Error fetching forecast from backend.");
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
   };
 
   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>
+      <h1>📈 Stock Price Forecaster (LSTM)</h1>
+      <p>Enter a company name or ticker to predict the next day’s close price.</p>
 
-        {error && <p className="error-message">{error}</p>}
-        
-        {prediction && (
-          <div className="prediction-result">
-            <pre>{prediction}</pre>
-          </div>
-        )}
-      </header>
+      <input
+        type="text"
+        placeholder="e.g., Apple Inc. or AAPL"
+        value={inputValue}
+        onChange={handleInputChange}
+        className="input-box"
+      />
+
+      {companyName && ticker && (
+        <p className="info-text">
+          🏢 <b>{companyName}</b> → 💹 <b>{ticker}</b>
+        </p>
+      )}
+
+      <button onClick={handleForecast} disabled={loading}>
+        {loading ? "Predicting..." : "Get Forecast"}
+      </button>
+
+      {forecast && (
+        <div className="result-box">
+          <h3>Prediction Result</h3>
+          <p>{forecast}</p>
+        </div>
+      )}
     </div>
   );
 }
 
-export default App;
+export default App;