# =====================================================

# Economic News Sentiment + Forecasting Script
# =====================================================

# Install packages if not already installed:
# pip install transformers requests beautifulsoup4 pandas prophet tweepy streamlit

# -------------------------------
# 1. Imports
# -------------------------------
import requests
from bs4 import BeautifulSoup
import pandas as pd
from datetime import datetime
from transformers import pipeline
from prophet import Prophet
import json
import tweepy # For Twitter data

# -------------------------------
# 2. Hugging Face Sentiment Model
# -------------------------------
sentiment_model = pipeline("sentiment-analysis", model="yiyanghkust/finbert-tone")

def sentiment_score(text):
"""Return numeric sentiment score for text"""
result = sentiment_model(text)[0]
if result['label'] == 'positive':
return 1
elif result['label'] == 'neutral':
return 0
else:
return -1

# -------------------------------
# 3. Fetch News Headlines (RSS)
# -------------------------------
def fetch_rss_news(rss_url):
response = requests.get(rss_url)
soup = BeautifulSoup(response.content, 'xml')
items = soup.find_all('item')
data = []
for item in items:
title = item.title.text
pub_date = datetime.strptime(item.pubDate.text, '%a, %d %b %Y %H:%M:%S %Z')
data.append({'date': pub_date, 'headline': title})
return pd.DataFrame(data)

news_sources = [
'https://www.reuters.com/finance/economy/rss',
# Add more RSS links here if needed
]

news_df = pd.concat([fetch_rss_news(url) for url in news_sources])
news_df['sentiment'] = news_df['headline'].apply(sentiment_score)

# -------------------------------
# 4. Fetch Twitter Data
# -------------------------------
# You need Twitter API keys
# consumer_key, consumer_secret, access_token, access_token_secret

# Example placeholder (fill your own keys)
consumer_key = 'YOUR_KEY'
consumer_secret = 'YOUR_SECRET'
access_token = 'YOUR_ACCESS_TOKEN'
access_token_secret = 'YOUR_ACCESS_SECRET'

auth = tweepy.OAuth1UserHandler(consumer_key, consumer_secret, access_token, access_token_secret)
api = tweepy.API(auth)

def fetch_tweets(hashtag, count=50):
tweets = api.search_tweets(q=hashtag, count=count, lang='en', tweet_mode='extended')
data = []
for t in tweets:
date = t.created_at
text = t.full_text
data.append({'date': date, 'headline': text})
return pd.DataFrame(data)

hashtags = ['#KenyaEconomy', '#Inflation', '#GDP', '#InterestRates']
tweets_df = pd.concat([fetch_tweets(tag) for tag in hashtags])
tweets_df['sentiment'] = tweets_df['headline'].apply(sentiment_score)

# -------------------------------
# 5. Merge News + Tweets
# -------------------------------
all_texts = pd.concat([news_df, tweets_df])
all_texts['date_only'] = all_texts['date'].dt.date
daily_sentiment = all_texts.groupby('date_only')['sentiment'].mean().reset_index()
daily_sentiment.rename(columns={'date_only':'ds','sentiment':'y_sentiment'}, inplace=True)

# -------------------------------
# 6. Load Historical Economic Indicators
# -------------------------------
# CSV should have columns: date,inflation,GDP,interest_rate
historical = pd.read_csv('historical_economics.csv')
historical['ds'] = pd.to_datetime(historical['date'])
historical = historical[['ds','inflation','GDP','interest_rate']]

# Merge with sentiment
data = historical.merge(daily_sentiment, on='ds', how='left')
data['y_sentiment'].fillna(0, inplace=True)

# -------------------------------
# 7. Forecasting with Prophet
# -------------------------------
def forecast_indicator(df, indicator_col, sentiment_col='y_sentiment', periods=30):
df_prophet = df[['ds', indicator_col, sentiment_col]].rename(columns={indicator_col:'y'})
m = Prophet()
m.add_regressor(sentiment_col)
m.fit(df_prophet)

future = m.make_future_dataframe(periods=periods)
future = future.merge(df[['ds', sentiment_col]], on='ds', how='left')
future[sentiment_col].fillna(0, inplace=True)

forecast = m.predict(future)
forecast = forecast[['ds','yhat','yhat_lower','yhat_upper']]
forecast.rename(columns={'yhat':f'{indicator_col}_pred',
'yhat_lower':f'{indicator_col}_lower',
'yhat_upper':f'{indicator_col}_upper'}, inplace=True)
return forecast

forecast_inflation = forecast_indicator(data, 'inflation')
forecast_gdp = forecast_indicator(data, 'GDP')
forecast_interest = forecast_indicator(data, 'interest_rate')

# -------------------------------
# 8. Combine Forecasts + Sentiment into JSON
# -------------------------------
forecast_json = []
for i, row in data.iterrows():
f_row = {
"date": row['ds'].strftime('%Y-%m-%d'),
"sentiment_score": float(row['y_sentiment']),
"forecast": {
"inflation": {
"predicted_value": float(forecast_inflation.loc[i,'inflation_pred']),
"lower_ci": float(forecast_inflation.loc[i,'inflation_lower']),
"upper_ci": float(forecast_inflation.loc[i,'inflation_upper'])
},
"GDP": {
"predicted_value": float(forecast_gdp.loc[i,'GDP_pred']),
"lower_ci": float(forecast_gdp.loc[i,'GDP_lower']),
"upper_ci": float(forecast_gdp.loc[i,'GDP_upper'])
},
"interest_rate": {
"predicted_value": float(forecast_interest.loc[i,'interest_rate_pred']),
"lower_ci": float(forecast_interest.loc[i,'interest_rate_lower']),
"upper_ci": float(forecast_interest.loc[i,'interest_rate_upper'])
}
}
}
forecast_json.append(f_row)

# Save to JSON file
with open('economic_forecast.json','w') as f:
json.dump(forecast_json, f, indent=4)

print("✅ Economic sentiment + forecast JSON generated: economic_forecast.json")

README.md

@@ -1,10 +1,13 @@
 ---
-title: Suepcaf
-emoji: 🌖
-colorFrom: indigo
-colorTo: indigo
+title: ---------------------suepcaf
+colorFrom: yellow
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,104 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EconoPulse Predictor | Economic Sentiment Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+    <custom-navbar></custom-navbar>
+
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="mb-16">
+            <div class="text-center">
+                <h1 class="text-4xl md:text-6xl font-bold text-gray-800 dark:text-white mb-4">
+                    Economic <span class="text-indigo-600">Sentiment</span> Intelligence
+                </h1>
+                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                    Real-time economic sentiment analysis and forecasting powered by AI and social data
+                </p>
+            </div>
+        </section>
+
+        <!-- Dashboard Overview -->
+        <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+            <!-- Sentiment Card -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Current Sentiment</h3>
+                    <i data-feather="activity" class="text-indigo-500"></i>
+                </div>
+                <div id="sentimentGauge" class="h-40 mb-4"></div>
+                <p class="text-gray-600 dark:text-gray-300 text-sm" id="sentimentText">Loading sentiment data...</p>
+            </div>
+
+            <!-- Inflation Card -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Inflation Forecast</h3>
+                    <i data-feather="trending-up" class="text-red-500"></i>
+                </div>
+                <div class="h-40 mb-4">
+                    <canvas id="inflationChart"></canvas>
+                </div>
+                <p class="text-gray-600 dark:text-gray-300 text-sm" id="inflationText">Loading inflation data...</p>
+            </div>
+
+            <!-- GDP Card -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">GDP Growth</h3>
+                    <i data-feather="dollar-sign" class="text-green-500"></i>
+                </div>
+                <div class="h-40 mb-4">
+                    <canvas id="gdpChart"></canvas>
+                </div>
+                <p class="text-gray-600 dark:text-gray-300 text-sm" id="gdpText">Loading GDP data...</p>
+            </div>
+        </section>
+
+        <!-- Detailed Charts Section -->
+        <section class="mb-12">
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6">Economic Indicators Timeline</h2>
+                <div class="h-96">
+                    <canvas id="fullChart"></canvas>
+                </div>
+            </div>
+        </section>
+
+        <!-- News Feed Section -->
+        <section>
+            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Latest Economic Headlines</h2>
+            <div id="newsFeed" class="space-y-4">
+                <!-- News items will be loaded here -->
+                <div class="animate-pulse flex space-x-4">
+                    <div class="flex-1 space-y-4 py-1">
+                        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
+                        <div class="space-y-2">
+                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,301 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize charts with sample data
+    initCharts();
+    loadNewsFeed();
+    setupDarkModeToggle();
+});
+
+function initCharts() {
+    // Sample data - in a real app, this would come from your API
+    const dates = ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06'];
+    const inflationData = [5.2, 5.5, 5.8, 6.1, 6.0, 5.9];
+    const gdpData = [2.1, 2.3, 2.5, 2.7, 2.9, 3.1];
+    const sentimentData = [0.2, -0.1, 0.3, -0.2, 0.1, 0.4];
+
+    // Inflation Chart
+    const inflationCtx = document.getElementById('inflationChart').getContext('2d');
+    new Chart(inflationCtx, {
+        type: 'line',
+        data: {
+            labels: dates,
+            datasets: [{
+                label: 'Inflation Rate',
+                data: inflationData,
+                borderColor: '#ef4444',
+                backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                tension: 0.3,
+                fill: true
+            }]
+        },
+        options: getChartOptions('Inflation Rate (%)')
+    });
+
+    // GDP Chart
+    const gdpCtx = document.getElementById('gdpChart').getContext('2d');
+    new Chart(gdpCtx, {
+        type: 'line',
+        data: {
+            labels: dates,
+            datasets: [{
+                label: 'GDP Growth',
+                data: gdpData,
+                borderColor: '#10b981',
+                backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                tension: 0.3,
+                fill: true
+            }]
+        },
+        options: getChartOptions('GDP Growth (%)')
+    });
+
+    // Full Chart
+    const fullCtx = document.getElementById('fullChart').getContext('2d');
+    new Chart(fullCtx, {
+        type: 'line',
+        data: {
+            labels: dates,
+            datasets: [
+                {
+                    label: 'Inflation',
+                    data: inflationData,
+                    borderColor: '#ef4444',
+                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                    yAxisID: 'y',
+                    tension: 0.3
+                },
+                {
+                    label: 'GDP Growth',
+                    data: gdpData,
+                    borderColor: '#10b981',
+                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                    yAxisID: 'y',
+                    tension: 0.3
+                },
+                {
+                    label: 'Sentiment',
+                    data: sentimentData,
+                    borderColor: '#6366f1',
+                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
+                    yAxisID: 'y1',
+                    tension: 0.3
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            interaction: {
+                mode: 'index',
+                intersect: false,
+            },
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Economic Indicators Over Time',
+                    color: '#6b7280',
+                    font: {
+                        size: 16
+                    }
+                },
+                legend: {
+                    position: 'top',
+                    labels: {
+                        color: '#6b7280'
+                    }
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false
+                }
+            },
+            scales: {
+                x: {
+                    grid: {
+                        color: 'rgba(209, 213, 219, 0.2)'
+                    },
+                    ticks: {
+                        color: '#6b7280'
+                    }
+                },
+                y: {
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    grid: {
+                        color: 'rgba(209, 213, 219, 0.2)'
+                    },
+                    ticks: {
+                        color: '#6b7280'
+                    }
+                },
+                y1: {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    grid: {
+                        drawOnChartArea: false,
+                        color: 'rgba(209, 213, 219, 0.2)'
+                    },
+                    ticks: {
+                        color: '#6b7280'
+                    }
+                }
+            }
+        }
+    });
+
+    // Update text elements
+    document.getElementById('sentimentText').textContent = `Current sentiment: Positive (0.42)`;
+    document.getElementById('inflationText').textContent = `Forecast: 5.9% (↓ 0.1% from last month)`;
+    document.getElementById('gdpText').textContent = `Forecast: 3.1% (↑ 0.2% from last quarter)`;
+
+    // Initialize sentiment gauge
+    updateSentimentGauge(0.42);
+}
+
+function getChartOptions(title) {
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            title: {
+                display: false
+            },
+            tooltip: {
+                enabled: true,
+                mode: 'index',
+                intersect: false
+            }
+        },
+        scales: {
+            x: {
+                grid: {
+                    display: false
+                },
+                ticks: {
+                    display: false
+                }
+            },
+            y: {
+                grid: {
+                    display: false
+                },
+                ticks: {
+                    display: false
+                }
+            }
+        },
+        elements: {
+            point: {
+                radius: 0
+            }
+        }
+    };
+}
+
+function updateSentimentGauge(value) {
+    // Value between -1 and 1
+    const gaugeFill = document.createElement('div');
+    gaugeFill.className = 'gauge-fill';
+    gaugeFill.style.transform = `rotate(${value * 0.5}turn)`;
+    
+    const gaugeCover = document.createElement('div');
+    gaugeCover.className = 'gauge-cover';
+    gaugeCover.textContent = value > 0 ? '+' + value.toFixed(2) : value.toFixed(2);
+    
+    const gaugeBody = document.createElement('div');
+    gaugeBody.className = 'gauge-body';
+    gaugeBody.appendChild(gaugeFill);
+    
+    const gaugeContainer = document.createElement('div');
+    gaugeContainer.className = 'gauge-container';
+    gaugeContainer.appendChild(gaugeBody);
+    gaugeContainer.appendChild(gaugeCover);
+    
+    document.getElementById('sentimentGauge').innerHTML = '';
+    document.getElementById('sentimentGauge').appendChild(gaugeContainer);
+}
+
+async function loadNewsFeed() {
+    try {
+        // In a real app, you would fetch this from your API
+        const mockNews = [
+            {
+                title: "Central Bank Announces Interest Rate Hike to Combat Inflation",
+                source: "Financial Times",
+                date: "2023-06-15",
+                sentiment: 0.42
+            },
+            {
+                title: "GDP Growth Exceeds Expectations in Q2",
+                source: "Bloomberg",
+                date: "2023-06-10",
+                sentiment: 0.78
+            },
+            {
+                title: "Unemployment Rates Rise Slightly Amid Economic Slowdown",
+                source: "Reuters",
+                date: "2023-06-05",
+                sentiment: -0.35
+            },
+            {
+                title: "Government Announces New Stimulus Package to Boost Economy",
+                source: "Wall Street Journal",
+                date: "2023-05-28",
+                sentiment: 0.65
+            }
+        ];
+
+        const newsFeed = document.getElementById('newsFeed');
+        newsFeed.innerHTML = '';
+
+        mockNews.forEach(item => {
+            const sentimentColor = item.sentiment > 0.5 ? 'text-green-500' : 
+                                 item.sentiment < -0.5 ? 'text-red-500' : 'text-yellow-500';
+            const sentimentIcon = item.sentiment > 0.5 ? 'trending-up' : 
+                                 item.sentiment < -0.5 ? 'trending-down' : 'minus';
+
+            const newsItem = document.createElement('div');
+            newsItem.className = 'news-item bg-white dark:bg-gray-800 rounded-lg shadow p-4';
+            newsItem.innerHTML = `
+                <div class="flex justify-between items-start">
+                    <div class="flex-1">
+                        <h3 class="font-medium text-gray-800 dark:text-gray-200">${item.title}</h3>
+                        <div class="flex items-center mt-2 text-sm text-gray-500 dark:text-gray-400">
+                            <span>${item.source}</span>
+                            <span class="mx-2">•</span>
+                            <span>${item.date}</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center ml-4 ${sentimentColor}">
+                        <i data-feather="${sentimentIcon}" class="w-5 h-5 mr-1"></i>
+                        <span>${item.sentiment > 0 ? '+' : ''}${item.sentiment.toFixed(2)}</span>
+                    </div>
+                </div>
+            `;
+            newsFeed.appendChild(newsItem);
+        });
+
+        feather.replace();
+    } catch (error) {
+        console.error('Error loading news feed:', error);
+        document.getElementById('newsFeed').innerHTML = `
+            <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+                <i data-feather="alert-circle" class="w-12 h-12 mx-auto mb-4"></i>
+                <p>Failed to load news feed. Please try again later.</p>
+            </div>
+        `;
+        feather.replace();
+    }
+}
+
+function setupDarkModeToggle() {
+    const darkModeToggle = document.createElement('button');
+    darkModeToggle.className = 'flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200';
+    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
+    darkModeToggle.addEventListener('click', () => {
+        document.documentElement.classList.toggle('dark');
+        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        feather.replace();

style.css

@@ -1,28 +1,97 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Gauge styles */
+.gauge-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.gauge-body {
+    width: 100%;
+    height: 0;
+    padding-bottom: 50%;
+    position: relative;
+    border-top-left-radius: 100% 200%;
+    border-top-right-radius: 100% 200%;
+    overflow: hidden;
+    background: #e5e7eb;
+}
+
+.gauge-fill {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right, #ef4444, #f59e0b, #10b981);
+    transform-origin: center top;
+    transform: rotate(0.5turn);
+    transition: transform 1s ease-out;
+}
+
+.gauge-cover {
+    width: 75%;
+    height: 150%;
+    background: white;
+    border-radius: 50%;
+    position: absolute;
+    top: 25%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: bold;
+    color: #1f2937;
+}
+
+.dark .gauge-cover {
+    background: #1f2937;
+    color: #f3f4f6;
+}
+
+/* Animation for news items */
+.news-item {
+    transition: all 0.3s ease;
+}
+
+.news-item:hover {
+    transform: translateY(-2px);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+
+.dark ::-webkit-scrollbar-track {
+    background: #374151;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background: #6b7280;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+}