fix: integrate dashboard into main.py and switch to single-port 7860 for HF

Dockerfile

@@ -13,10 +13,8 @@ RUN pip3 install -r requirements.txt
 
 COPY . .
 
-# Expose ports for FastAPI (8000) and Streamlit (7860 - default HF Space port)
-EXPOSE 8000
+# Expose only the primary port for HF Space
 EXPOSE 7860
 
-# Command to run both FastAPI and Streamlit
-# We use & to run FastAPI in background and streamlit in foreground
-CMD uvicorn main:app --host 0.0.0.0 --port 8000 & streamlit run app.py --server.port 7860 --server.address 0.0.0.0
+# Run FastAPI on the primary port
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -1,169 +0,0 @@
-import streamlit as st
-import httpx
-import json
-import pandas as pd
-from datetime import datetime
-
-st.set_page_config(
-    page_title="Weatherhack API Dashboard",
-    page_icon="🌤️",
-    layout="wide",
-)
-
-# Custom CSS for glassmorphic premium look
-st.markdown(
-    """
-    <style>
-    .main {
-        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
-        color: white;
-    }
-    .stApp {
-        background: transparent;
-    }
-    [data-testid="stSidebar"] {
-        background-color: rgba(255, 255, 255, 0.05);
-        backdrop-filter: blur(10px);
-    }
-    .stMetric {
-        background: rgba(255, 255, 255, 0.1);
-        padding: 15px;
-        border-radius: 10px;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    .stJson {
-        background-color: #0e1117;
-        border-radius: 5px;
-        padding: 10px;
-    }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
-
-st.title("🌤️ Weatherhack API Dashboard")
-st.markdown("---")
-
-# Sidebar - API Configuration
-st.sidebar.header("🔑 API Configuration")
-api_base_url = st.sidebar.text_input("API Base URL", value="http://localhost:8000")
-access_key = st.sidebar.text_input(
-    "Access Key", value="b55a6ab9aec1ab156c0b46f0a9ef93dd", type="password"
-)
-
-st.sidebar.markdown("---")
-st.sidebar.subheader("📍 Quick Test")
-query = st.sidebar.text_input("Location Query", value="New York")
-units = st.sidebar.selectbox(
-    "Units",
-    options=["m", "f", "s"],
-    format_func=lambda x: {"m": "Metric", "f": "Fahrenheit", "s": "Scientific"}[x],
-)
-
-# Main Area - Tabs
-tab1, tab2, tab3 = st.tabs(
-    ["🌤️ Current Weather", "📅 Forecast / Historical", "🔍 Autocomplete"]
-)
-
-with tab1:
-    st.header("Real-time Weather Data")
-    if st.button("Fetch Current Weather"):
-        with st.spinner("Requesting data..."):
-            try:
-                url = f"{api_base_url}/current"
-                params = {"access_key": access_key, "query": query, "units": units}
-                response = httpx.get(url, params=params, timeout=10.0)
-
-                if response.status_code == 200:
-                    data = response.json()
-
-                    # Dashboard Layout
-                    col1, col2, col3, col4 = st.columns(4)
-
-                    with col1:
-                        st.metric("Temperature", f"{data['current']['temperature']}°")
-                        st.write(f"Feels like: {data['current']['feelslike']}°")
-                    with col2:
-                        st.metric("Humidity", f"{data['current']['humidity']}%")
-                        st.write(f"Cloudcover: {data['current']['cloudcover']}%")
-                    with col3:
-                        st.metric("Wind Speed", f"{data['current']['wind_speed']}")
-                        st.write(
-                            f"Direction: {data['current']['wind_dir']} ({data['current']['wind_degree']}°)"
-                        )
-                    with col4:
-                        st.metric("UV Index", f"{data['current']['uv_index']}")
-                        st.write(f"Visibility: {data['current']['visibility']} km")
-
-                    st.markdown("### 🍃 Air Quality Indices")
-                    aq = data["current"].get("air_quality")
-                    if aq:
-                        aq_col1, aq_col2, aq_col3 = st.columns(3)
-                        with aq_col1:
-                            st.write(f"**PM2.5**: {aq['pm2_5']}")
-                            st.write(f"**PM10**: {aq['pm10']}")
-                        with aq_col2:
-                            st.write(f"**CO**: {aq['co']}")
-                            st.write(f"**NO2**: {aq['no2']}")
-                        with aq_col3:
-                            st.write(f"**US EPA Index**: {aq.get('us-epa-index')}")
-                            st.write(f"**GB DEFRA Index**: {aq.get('gb-defra-index')}")
-
-                    st.markdown("### 📜 Raw JSON Response")
-                    st.json(data)
-                else:
-                    st.error(f"Error {response.status_code}: {response.text}")
-            except Exception as e:
-                st.error(f"Request failed: {str(e)}")
-
-with tab2:
-    st.header("Historical & Forecast Data")
-    sub_tab1, sub_tab2 = st.tabs(["7-Day Forecast", "Historical Query"])
-
-    with sub_tab1:
-        if st.button("Get Forecast"):
-            params = {
-                "access_key": access_key,
-                "query": query,
-                "forecast_days": 7,
-                "units": units,
-            }
-            res = httpx.get(f"{api_base_url}/forecast", params=params)
-            if res.status_code == 200:
-                st.json(res.json())
-            else:
-                st.error(res.text)
-
-    with sub_tab2:
-        hist_date = st.date_input("Select Date", value=datetime.now())
-        if st.button("Get Historical"):
-            params = {
-                "access_key": access_key,
-                "query": query,
-                "historical_date": hist_date.isoformat(),
-                "units": units,
-            }
-            res = httpx.get(f"{api_base_url}/historical", params=params)
-            if res.status_code == 200:
-                st.json(res.json())
-            else:
-                st.error(res.text)
-
-with tab3:
-    st.header("Location Autocomplete")
-    ac_query = st.text_input("Type a city name...", value="San Fran")
-    if st.button("Search Suggestions"):
-        params = {"access_key": access_key, "query": ac_query}
-        res = httpx.get(f"{api_base_url}/autocomplete", params=params)
-        if res.status_code == 200:
-            data = res.json()
-            if data.get("locations"):
-                df = pd.DataFrame(data["locations"])
-                st.table(df[["name", "country", "region", "timezone_id"]])
-            else:
-                st.info("No suggestions found.")
-        else:
-            st.error(res.text)
-
-st.markdown("---")
-st.caption("Weatherhack API | Zero-Cost Infrastructure | Open-Meteo & Nominatim")

main.py

@@ -19,11 +19,20 @@ from pydantic_settings import BaseSettings, SettingsConfigDict
 class Settings(BaseSettings):
     weatherstack_access_key: str = "test"
 
-    model_config = SettingsConfigDict(env_file=".env", extra="ignore")
+    model_config = SettingsConfigDict(
+        env_file=".env",
+        extra="ignore",
+        env_prefix="",  # Ensure it picks up bare env vars
+    )
 
 
 settings = Settings()
 
+# Debug log for key loading (masked)
+print(
+    f"DEBUG: Key loaded: {settings.weatherstack_access_key[:4]}...{settings.weatherstack_access_key[-4:]}"
+)
+
 
 def validate_key(access_key: str):
     if access_key != settings.weatherstack_access_key:
@@ -214,5 +223,198 @@ async def autocomplete_location(access_key: str, query: str):
     )
 
 
+from fastapi.responses import HTMLResponse, RedirectResponse
+
+
+@app.get("/", include_in_schema=False)
+async def root():
+    return RedirectResponse(url="/dashboard")
+
+
+@app.get("/dashboard", response_class=HTMLResponse, include_in_schema=False)
+async def dashboard():
+    return """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weatherhack API | Dashboard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #3b82f6;
+            --primary-dark: #1e40af;
+            --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
+            --glass: rgba(255, 255, 255, 0.05);
+            --glass-border: rgba(255, 255, 255, 0.1);
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background: var(--bg-gradient);
+            color: white;
+            min-height: 100vh;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+        }
+        .container {
+            max-width: 900px;
+            width: 100%;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        .header h1 {
+            font-size: 3rem;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(to right, #60a5fa, #a855f7);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .card {
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border: 1px solid var(--glass-border);
+            border-radius: 1.5rem;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+        }
+        .input-group {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+            flex-wrap: wrap;
+        }
+        input, select {
+            background: rgba(0,0,0,0.2);
+            border: 1px solid var(--glass-border);
+            color: white;
+            padding: 0.75rem 1rem;
+            border-radius: 0.75rem;
+            font-size: 1rem;
+            flex: 1;
+            min-width: 200px;
+        }
+        button {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 0.75rem 2rem;
+            border-radius: 0.75rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        button:hover {
+            background: var(--primary-dark);
+            transform: translateY(-2px);
+        }
+        pre {
+            background: #000;
+            padding: 1rem;
+            border-radius: 1rem;
+            overflow-x: auto;
+            max-height: 400px;
+            border: 1px solid var(--glass-border);
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        .stat {
+            background: rgba(255,255,255,0.03);
+            padding: 1.5rem;
+            border-radius: 1rem;
+            text-align: center;
+        }
+        .stat h3 { margin: 0; color: #94a3b8; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
+        .stat p { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 700; }
+        .badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: var(--primary); font-size: 0.75rem; font-weight: 700; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🌤️ Weatherhack API</h1>
+            <p>Premium, Zero-Cost Weather Infrastructure</p>
+        </div>
+
+        <div class="card">
+            <h3>🔑 API Configuration</h3>
+            <div class="input-group">
+                <input type="password" id="access_key" placeholder="Enter Access Key" value="b55a6ab9aec1ab156c0b46f0a9ef93dd">
+                <input type="text" id="query" placeholder="City or Lat,Lon" value="Monticello, Indiana">
+                <select id="units">
+                    <option value="m">Metric</option>
+                    <option value="f">Fahrenheit</option>
+                    <option value="s">Scientific</option>
+                </select>
+            </div>
+            <button onclick="fetchWeather()">Fetch Current Weather</button>
+        </div>
+
+        <div id="results" style="display:none;">
+            <div class="card">
+                <div class="grid" id="stats-grid"></div>
+                <h3>📜 API Response</h3>
+                <pre id="json-output"></pre>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        async function fetchWeather() {
+            const key = document.getElementById('access_key').value;
+            const query = document.getElementById('query').value;
+            const units = document.getElementById('units').value;
+            const btn = document.querySelector('button');
+            
+            btn.innerText = 'Loading...';
+            btn.disabled = true;
+
+            try {
+                const url = `/current?access_key=${key}&query=${query}&units=${units}`;
+                const res = await fetch(url);
+                const data = await res.json();
+
+                document.getElementById('results').style.display = 'block';
+                document.getElementById('json-output').innerText = JSON.stringify(data, null, 2);
+
+                if (data.current) {
+                    const stats = [
+                        { label: 'Temperature', val: `${data.current.temperature}°` },
+                        { label: 'Condition', val: data.current.weather_descriptions[0] },
+                        { label: 'Wind Speed', val: `${data.current.wind_speed} ${units === 'f' ? 'mph' : 'km/h'}` },
+                        { label: 'Air Quality (PM2.5)', val: data.current.air_quality ? data.current.air_quality.pm2_5 : 'N/A' }
+                    ];
+                    document.getElementById('stats-grid').innerHTML = stats.map(s => `
+                        <div class="stat">
+                            <h3>${s.label}</h3>
+                            <p>${s.val}</p>
+                        </div>
+                    `).join('');
+                } else {
+                    document.getElementById('stats-grid').innerHTML = '<div class="stat"><p style="color:#f87171;">API Error: ' + (data.error ? data.error.info : 'Unknown error') + '</p></div>';
+                }
+            } catch (e) {
+                alert('Connection failure. Make sure the API is accessible.');
+            } finally {
+                btn.innerText = 'Fetch Current Weather';
+                btn.disabled = false;
+            }
+        }
+    </script>
+</body>
+</html>
+    """
+
+
 if __name__ == "__main__":
     uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)