Probability Display

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_215":216,"_217":218},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_162":-5,"_20":163,"_22":164,"_165":166,"_167":168,"_26":169,"_24":170,"_171":-5,"_172":-5,"_173":54,"_174":175,"_176":46,"_177":-5,"_178":-5,"_179":180},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","sultanoloyede","name","stock_forecast","branchName","main","version","path","frontend","project",{"_34":109,"_13":14,"_47":110,"_111":-5,"_112":54,"_113":114,"_115":114,"_116":-5,"_117":-5,"_118":119,"_120":102,"_121":46,"_122":46,"_123":-5,"_124":60,"_125":126,"_127":-5,"_128":-5,"_129":-5,"_130":-5,"_131":132,"_133":132,"_134":135,"_136":135,"_137":135,"_138":132,"_139":132,"_140":141,"_142":143,"_144":145,"_146":54},"tree",[63,64,65,66],"file",{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":58,"_45":46,"_47":59,"_17":60,"_50":61,"_51":-5,"_53":54,"_55":-5,"_18":62},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","d235df14-3a2d-11f0-aacd-9e149126039e","index.html","fileId","79fb0c00-39bc-11f0-bcdf-9e149126039e","parentId","92e2aadf-c50a-44ee-a196-52490067584e","branchId","0cfcda9e-39bb-11f0-9998-9e149126039e","branchVersion",16,"latest",true,"createdAt",["D",1748262892311],7,"fileType","content","\n\n\n \n \n Probability Display\n \n\n\n

\n\n \n\n","deleted",false,"label",[19,36],"79fb3482-39bc-11f0-bcdf-9e149126039e",3,["D",1748214211157],0,"directory",[19],{"_34":92,"_13":93,"_37":94,"_39":-5,"_41":42,"_43":95,"_45":46,"_47":96,"_17":60,"_50":61,"_51":-5,"_53":54,"_55":-5,"_74":97,"_18":98},{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":58,"_45":46,"_47":85,"_17":60,"_50":61,"_51":-5,"_53":54,"_55":-5,"_74":86,"_18":87},{"_34":77,"_13":78,"_37":79,"_39":-5,"_41":42,"_43":80,"_45":46,"_47":81,"_17":70,"_50":24,"_51":82,"_53":54,"_55":-5,"_74":83,"_18":84},{"_34":67,"_13":68,"_37":69,"_39":-5,"_41":42,"_43":70,"_45":46,"_47":71,"_17":60,"_50":72,"_51":73,"_53":54,"_55":-5,"_74":75,"_18":76},"0cfe09e6-39bb-11f0-9998-9e149126039e","main.tsx","0cfe0a72-39bb-11f0-9998-9e149126039e",1,["D",1748213598809],"script","","children",[],[68],"b2b52670-39bc-11f0-b70a-9e149126039e","README.md","82027154-39bc-11f0-9550-9e149126039e",8,["D",1748214306325],"# Probability Display Website\n\nA beautiful, responsive website that fetches probability data from an external API and displays it in an aesthetic manner.\n\n## Features\n\n- 🎯 Fetches data from `https://2275-65-95-228-32.ngrok-free.app/predict`\n- 📊 Extracts probability value and converts to percentage (multiplies by 100)\n- 🎨 Beautiful gradient design with animated elements\n- 📱 Fully responsive for mobile and desktop\n- 🔄 Auto-refresh every 30 seconds\n- ⚡ Real-time loading and error states\n- 🎭 Smooth animations and transitions\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono API server with probability endpoint\n├── frontend/\n│ └── index.html # Main website with aesthetic display\n└── README.md\n```\n\n## API Endpoints\n\n- `GET /` - Main website\n- `GET /api/probability` - Fetches and processes probability data\n\n## Design Features\n\n- **Animated Circle**: Pulsing gradient circle displaying the percentage\n- **Loading States**: Elegant spinner while fetching data\n- **Error Handling**: User-friendly error messages with retry functionality\n- **Auto-refresh**: Updates data every 30 seconds automatically\n- **Responsive**: Works perfectly on all device sizes\n\n## Technical Stack\n\n- **Backend**: Hono framework for API handling\n- **Frontend**: Vanilla HTML/CSS/JS with TailwindCSS\n- **Styling**: Custom CSS animations + Tailwind utilities\n- **Fonts**: Google Fonts (Inter)",[],[78],["D",1748214211157],[88],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":89,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_74":90,"_18":91},["D",1748262892311],[],[19,36],"6c603e58-39bc-11f0-9efc-9e149126039e","backend","cd3e9980-e45d-415e-9199-0bfed67562a6",2,["D",1748214188328],[99],[93],{"_34":100,"_13":101,"_37":102,"_39":94,"_41":42,"_43":103,"_45":46,"_47":104,"_17":80,"_50":105,"_51":106,"_53":54,"_55":-5,"_74":107,"_18":108},"c6288fce-50f2-11f0-a338-f69ea79377d9","index.ts","6c601c2a-39bc-11f0-9efc-9e149126039e",20,["D",1750766408503],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// API endpoint to fetch probability data\napp.get(\"/api/probability\", async (c) => {\n try {\n const response = await fetch(\"https://37ce-137-122-64-213.ngrok-free.app/predict\", {\n headers: {\n \"ngrok-skip-browser-warning\": \"true\",\n },\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n console.log(\"Received data:\", data); // Debug log\n\n // Try to find probability value in different possible field names\n let probability = null;\n const possibleFields = [\"probability\", \"prob\", \"p\", \"score\", \"value\", \"result\"];\n\n for (const field of possibleFields) {\n if (typeof data[field] === \"number\") {\n probability = data[field];\n break;\n }\n }\n\n // If no direct field found, check if data itself is a number\n if (probability === null && typeof data === \"number\") {\n probability = data;\n }\n\n if (probability === null) {\n throw new Error(`Probability value not found. Available fields: ${Object.keys(data).join(\", \")}`);\n }\n\n const percentage = probability * 100;\n\n return c.json({\n probability: percentage,\n originalData: data,\n foundField: typeof data === \"number\" ? \"root\" : possibleFields.find(f => typeof data[f] === \"number\"),\n });\n } catch (error) {\n console.error(\"Error fetching probability:\", error);\n return c.json({\n error: \"Failed to fetch probability data\",\n message: error.message,\n }, 500);\n }\n});\n\n// Serve the main page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[93,101],"0cfc9048-39bb-11f0-9998-9e149126039e",["D",1748213598801],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","124f16b2-c4a6-4573-a1c0-78c6b64da210","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","80c9371d-28b2-439f-8746-b6469ec683df","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_161":157},"org",{"_11":12,"_155":-5,"_156":157,"_118":119,"_158":159,"_160":54},"branch",{"_17":103,"_13":16,"_34":42,"_147":109,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":14,"_154":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybkFzQVlQcXp2Rjc4d2F2Q3EwUEhERjhnUk4ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":109,"_13":14,"_47":211,"_111":-5,"_112":54,"_113":114,"_115":114,"_116":-5,"_117":-5,"_118":119,"_120":102,"_121":46,"_122":46,"_123":-5,"_124":60,"_125":126,"_127":-5,"_128":-5,"_129":-5,"_130":-5,"_131":132,"_133":132,"_134":135,"_136":135,"_137":135,"_138":132,"_139":132,"_140":212,"_142":213,"_144":214,"_146":54},[193,195,197,198],"files",[193,194,195,196,197,198],"counts",{"_184":60,"_185":70,"_186":60,"_32":187,"_188":189},[182],{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":58,"_45":46,"_47":59,"_17":60,"_50":61,"_51":-5,"_53":54,"_55":-5,"_18":181},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":183},[19,36],"pulls","branches","forks",{"_190":60,"_192":60},"connections",{"_190":60,"_191":60},"count","unfilledCount","emptyCount",{"_34":92,"_13":93,"_37":94,"_39":-5,"_41":42,"_43":95,"_45":46,"_47":96,"_17":60,"_50":61,"_51":-5,"_53":54,"_55":-5,"_74":209,"_18":210},{"_34":100,"_13":101,"_37":102,"_39":94,"_41":42,"_43":103,"_45":46,"_47":104,"_17":80,"_50":105,"_51":106,"_53":54,"_55":-5,"_74":207,"_18":208},{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":58,"_45":46,"_47":85,"_17":60,"_50":61,"_51":-5,"_53":54,"_55":-5,"_74":205,"_18":206},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":89,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_74":203,"_18":204},{"_34":77,"_13":78,"_37":79,"_39":-5,"_41":42,"_43":80,"_45":46,"_47":81,"_17":70,"_50":24,"_51":82,"_53":54,"_55":-5,"_74":201,"_18":202},{"_34":67,"_13":68,"_37":69,"_39":-5,"_41":42,"_43":70,"_45":46,"_47":71,"_17":60,"_50":72,"_51":73,"_53":54,"_55":-5,"_74":199,"_18":200},[],[68],[],[78],[],[19,36],[196],[19],[],[93,101],[194],[93],["D",1748213598801],{"_11":12,"_161":157},{"_11":12,"_155":-5,"_156":157,"_118":119,"_158":159,"_160":54},{"_17":103,"_13":16,"_34":42,"_147":109,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":14,"_154":12},"ctx",{"_140":-5,"_178":248,"_249":250,"_251":252,"_253":54,"_254":54,"_255":54,"_256":46,"_257":-5,"_258":-7,"_259":-7,"_260":60,"_261":54,"_262":54,"_263":-5,"_264":54,"_265":54,"_266":54,"_267":-5},"ENV",{"_219":220,"_221":222,"_223":16,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]