Spaces:

ndwdgda
/

report

Sleeping

App Files Files Community

ndwdgda commited on Dec 16, 2025

Commit

2eeded6

verified ·

1 Parent(s): 1548338

Upload folder using huggingface_hub

Browse files

Files changed (10) hide show

.gitattributes +3 -0
Dockerfile +14 -0
app.py +8 -0
assets/automation.png +3 -0
assets/cover.png +3 -0
assets/horizons.png +3 -0
index.html +201 -0
requirements.txt +2 -0
script.js +190 -0
styles.css +350 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/automation.png filter=lfs diff=lfs merge=lfs -text
+assets/cover.png filter=lfs diff=lfs merge=lfs -text
+assets/horizons.png filter=lfs diff=lfs merge=lfs -text

Dockerfile ADDED Viewed

	@@ -0,0 +1,14 @@

+FROM python:3.9
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+WORKDIR /app
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py ADDED Viewed

	@@ -0,0 +1,8 @@

+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+app = FastAPI()
+# Mount the current directory as static files
+# html=True allows serving index.html at root /
+app.mount("/", StaticFiles(directory=".", html=True), name="static")

assets/automation.png ADDED Viewed

Git LFS Details

SHA256: 761ad97de16c5082bd8c96e48f66507123a68d98d6b22690c125a7b386ccb8f4
Pointer size: 131 Bytes
Size of remote file: 745 kB

assets/cover.png ADDED Viewed

Git LFS Details

SHA256: 72f1d97fc5bf846f405553de43274bec8dac9b5b84f7533bdedf07c3b5867d74
Pointer size: 131 Bytes
Size of remote file: 656 kB

assets/horizons.png ADDED Viewed

Git LFS Details

SHA256: ca484d256f9e6eab630fdc57cadb1abe60e904afc23e3e12892fab9957447061
Pointer size: 131 Bytes
Size of remote file: 933 kB

index.html ADDED Viewed

	@@ -0,0 +1,201 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI & Job Displacement: A 2035 Outlook</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <a href="#" class="nav-logo">FutureWork<span class="accent">.ai</span></a>
+            <div class="nav-links">
+                <a href="#executive-summary">Summary</a>
+                <a href="#market-shift">Market Shift</a>
+                <a href="#industry-impact">Industry Impact</a>
+                <a href="#productivity">Productivity</a>
+                <a href="#conclusion">Conclusion</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <header class="hero">
+        <div class="hero-content">
+            <span class="badge">Special Report 2025</span>
+            <h1>The AI Displacement <br> Horizon</h1>
+            <p class="hero-subtitle">An in-depth analysis of how Artificial Intelligence will reshape the global
+                workforce by 2035.</p>
+            <a href="#executive-summary" class="btn-primary">Read the Report</a>
+        </div>
+        <div class="hero-visual">
+            <img src="assets/cover.png" alt="AI Displacement Cover Art"
+                style="width: 100%; height: 100%; object-fit: cover;">
+        </div>
+    </header>
+    <main>
+        <!-- Executive Summary -->
+        <section id="executive-summary" class="section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Executive Summary</h2>
+                    <p>The dawn of the Intelligence Age brings unprecedented opportunities and challenges.</p>
+                </div>
+                <div class="content-grid">
+                    <div class="text-block">
+                        <p>Artificial Intelligence is not just a technological upgrade; it is a fundamental shift in how
+                            value is created. Our analysis suggests that by 2035, <strong>45% of current tasks</strong>
+                            will be automated, yet the demand for human-centric skills will reach an all-time high.</p>
+                        <p>This report explores the dual nature of this transition: the displacement of routine
+                            cognitive and manual labor, and the simultaneous creation of new "AI-augmented" roles that
+                            do not exist today.</p>
+                    </div>
+                    <div class="stat-card">
+                        <h3>$15.7 Trillion</h3>
+                        <p>Projected contribution of AI to the global economy by 2030.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Chapter 1: The Global Market Shift -->
+        <section id="market-shift" class="section alt-bg">
+            <div class="container">
+                <div class="section-header">
+                    <span class="chapter-label">Chapter 01</span>
+                    <h2>The Global Market Shift</h2>
+                    <p>From repetition to creation: The changing nature of work.</p>
+                </div>
+                <div class="chart-container-large">
+                    <canvas id="marketShiftChart"></canvas>
+                </div>
+                <div class="content-columns">
+                    <div class="col">
+                        <h3>The Decline of Routine</h3>
+                        <p>Jobs heavily reliant on repetitive data processing, manual entry, and predictable physical
+                            tasks are seeing a rapid decline. Automation is no longer limited to factory floors; it has
+                            entered the office.</p>
+                    </div>
+                    <div class="col">
+                        <h3>The Rise of Strategy</h3>
+                        <p>Conversely, roles requiring complex problem-solving, emotional intelligence, and strategic
+                            oversight are growing. The "Human-in-the-loop" model is becoming the standard for high-value
+                            workflows.</p>
+                    </div>
+                </div>
+                <div class="visual-break">
+                    <img src="assets/automation.png" alt="Automation Wave"
+                        style="width: 100%; height: 100%; object-fit: cover;">
+                </div>
+            </div>
+        </section>
+        <!-- Chapter 2: Industry Impact -->
+        <section id="industry-impact" class="section">
+            <div class="container">
+                <div class="section-header">
+                    <span class="chapter-label">Chapter 02</span>
+                    <h2>Industry Impact Analysis</h2>
+                    <p>Not all sectors will be affected equally. A look at the disruption index.</p>
+                </div>
+                <div class="split-layout">
+                    <div class="text-side">
+                        <h3>Sector Vulnerability</h3>
+                        <p>Finance and Manufacturing face the highest immediate disruption due to the structured nature
+                            of their data and processes. However, they also stand to gain the most in efficiency.</p>
+                        <ul class="feature-list">
+                            <li><strong>Finance:</strong> Algorithmic trading and automated auditing.</li>
+                            <li><strong>Healthcare:</strong> AI diagnostics assisting doctors, not replacing them.</li>
+                            <li><strong>Creative:</strong> Generative AI as a tool for rapid prototyping.</li>
+                        </ul>
+                    </div>
+                    <div class="chart-side">
+                        <canvas id="industryRadarChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Chapter 3: Productivity vs Wages -->
+        <section id="productivity" class="section alt-bg">
+            <div class="container">
+                <div class="section-header">
+                    <span class="chapter-label">Chapter 03</span>
+                    <h2>Productivity & Wages</h2>
+                    <p>The decoupling of output and income: A critical challenge.</p>
+                </div>
+                <div class="chart-container-wide">
+                    <canvas id="productivityChart"></canvas>
+                </div>
+                <div class="text-block centered">
+                    <p>Historically, productivity growth led to wage growth. In the AI era, we risk a divergence where
+                        capital owners capture the majority of productivity gains, leaving labor behind. Policy
+                        intervention and aggressive upskilling are required to bridge this gap.</p>
+                </div>
+                <div class="visual-break">
+                    <!-- Placeholder for economic_impact_illustration -->
+                    <div class="img-placeholder" id="economic-placeholder">
+                        <span>Economic Impact Illustration</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Conclusion -->
+        <section id="conclusion" class="section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>The Path Forward</h2>
+                    <p>Adaptation is the only option.</p>
+                </div>
+                <div class="conclusion-grid">
+                    <div class="card">
+                        <h3>Reskilling</h3>
+                        <p>Continuous learning must become a lifelong habit, not a one-time degree.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Policy</h3>
+                        <p>Governments must explore UBI or Universal Basic Services to manage transition periods.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Ethics</h3>
+                        <p>Responsible AI deployment is crucial to maintaining public trust and social stability.</p>
+                    </div>
+                </div>
+                <div class="visual-break">
+                    <!-- Placeholder for new_horizons_illustration -->
+                    <img src="assets/horizons.png" alt="New Horizons"
+                        style="width: 100%; height: 100%; object-fit: cover;">
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <div class="container">
+            <p>&copy; 2025 FutureWork.ai Research Group. All rights reserved.</p>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ fastapi
2	+ uvicorn[standard]

script.js ADDED Viewed

	@@ -0,0 +1,190 @@

+// Chart.js Configuration
+// Global defaults for FAANG-like aesthetic
+Chart.defaults.font.family = "'Inter', system-ui, sans-serif";
+Chart.defaults.color = '#4b5563';
+Chart.defaults.scale.grid.color = '#f3f4f6';
+// 1. Global Market Shift Chart (Line Chart)
+const marketShiftCtx = document.getElementById('marketShiftChart').getContext('2d');
+new Chart(marketShiftCtx, {
+    type: 'line',
+    data: {
+        labels: ['2020', '2022', '2024', '2026', '2028', '2030', '2032', '2035'],
+        datasets: [
+            {
+                label: 'Routine/Manual Jobs',
+                data: [100, 95, 88, 75, 60, 50, 40, 30], // Normalized index
+                borderColor: '#ef4444', // Red for decline
+                backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                fill: true,
+                tension: 0.4,
+                borderWidth: 3
+            },
+            {
+                label: 'Creative/Strategic Jobs',
+                data: [40, 45, 55, 70, 85, 100, 120, 150], // Normalized index
+                borderColor: '#2563eb', // Blue for growth
+                backgroundColor: 'rgba(37, 99, 235, 0.1)',
+                fill: true,
+                tension: 0.4,
+                borderWidth: 3
+            }
+        ]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'top',
+                align: 'end',
+                labels: {
+                    usePointStyle: true,
+                    boxWidth: 8
+                }
+            },
+            title: {
+                display: true,
+                text: 'Workforce Composition Index (2020-2035)',
+                font: {
+                    size: 16,
+                    weight: '600'
+                },
+                align: 'start',
+                padding: {
+                    bottom: 20
+                }
+            },
+            tooltip: {
+                mode: 'index',
+                intersect: false,
+                backgroundColor: 'rgba(17, 24, 39, 0.9)',
+                padding: 12,
+                cornerRadius: 8
+            }
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Job Volume Index'
+                }
+            }
+        },
+        interaction: {
+            mode: 'nearest',
+            axis: 'x',
+            intersect: false
+        }
+    }
+});
+// 2. Industry Impact Radar Chart
+const industryRadarCtx = document.getElementById('industryRadarChart').getContext('2d');
+new Chart(industryRadarCtx, {
+    type: 'radar',
+    data: {
+        labels: ['Finance', 'Healthcare', 'Manufacturing', 'Retail', 'Tech', 'Education'],
+        datasets: [{
+            label: 'Automation Risk',
+            data: [85, 40, 90, 75, 50, 30],
+            fill: true,
+            backgroundColor: 'rgba(239, 68, 68, 0.2)',
+            borderColor: '#ef4444',
+            pointBackgroundColor: '#ef4444',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: '#ef4444'
+        }, {
+            label: 'AI Augmentation Potential',
+            data: [90, 95, 60, 50, 100, 85],
+            fill: true,
+            backgroundColor: 'rgba(37, 99, 235, 0.2)',
+            borderColor: '#2563eb',
+            pointBackgroundColor: '#2563eb',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: '#2563eb'
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'bottom'
+            }
+        },
+        scales: {
+            r: {
+                angleLines: {
+                    color: '#e5e7eb'
+                },
+                grid: {
+                    color: '#e5e7eb'
+                },
+                pointLabels: {
+                    font: {
+                        size: 12,
+                        weight: '500'
+                    }
+                },
+                suggestedMin: 0,
+                suggestedMax: 100
+            }
+        }
+    }
+});
+// 3. Productivity vs Wages (Bar/Line Combo)
+const productivityCtx = document.getElementById('productivityChart').getContext('2d');
+new Chart(productivityCtx, {
+    type: 'bar',
+    data: {
+        labels: ['2015', '2017', '2019', '2021', '2023', '2025 (Proj)', '2027 (Proj)', '2030 (Proj)'],
+        datasets: [
+            {
+                label: 'Productivity Output',
+                data: [100, 104, 109, 115, 125, 140, 165, 210],
+                type: 'line',
+                borderColor: '#10b981', // Emerald green
+                borderWidth: 3,
+                tension: 0.4,
+                yAxisID: 'y'
+            },
+            {
+                label: 'Median Wage Growth',
+                data: [100, 102, 105, 107, 109, 112, 116, 122],
+                backgroundColor: '#9ca3af', // Gray
+                yAxisID: 'y'
+            }
+        ]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            title: {
+                display: true,
+                text: 'The Great Divergence: Productivity vs. Wages',
+                align: 'start',
+                font: {
+                    size: 16,
+                    weight: '600'
+                }
+            }
+        },
+        scales: {
+            y: {
+                beginAtZero: false,
+                min: 90,
+                title: {
+                    display: true,
+                    text: 'Index (2015 = 100)'
+                }
+            }
+        }
+    }
+});

styles.css ADDED Viewed

	@@ -0,0 +1,350 @@

+/* Reset & Base */
+:root {
+    --bg-color: #ffffff;
+    --text-primary: #111827;
+    --text-secondary: #4b5563;
+    --accent-color: #2563eb; /* Electric Blue */
+    --accent-hover: #1d4ed8;
+    --bg-alt: #f9fafb;
+    --border-color: #e5e7eb;
+    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: var(--font-sans);
+    color: var(--text-primary);
+    line-height: 1.6;
+    background-color: var(--bg-color);
+    -webkit-font-smoothing: antialiased;
+}
+h1, h2, h3, h4 {
+    font-weight: 700;
+    letter-spacing: -0.025em;
+    line-height: 1.2;
+}
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.2s;
+}
+/* Utilities */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+.btn-primary {
+    display: inline-block;
+    background-color: var(--text-primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 9999px;
+    font-weight: 500;
+    transition: background-color 0.2s, transform 0.1s;
+}
+.btn-primary:hover {
+    background-color: #000;
+    transform: translateY(-1px);
+}
+/* Navbar */
+.navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+    z-index: 1000;
+    padding: 1rem 0;
+}
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.nav-logo {
+    font-weight: 700;
+    font-size: 1.25rem;
+}
+.nav-logo .accent {
+    color: var(--accent-color);
+}
+.nav-links a {
+    margin-left: 2rem;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+.nav-links a:hover {
+    color: var(--text-primary);
+}
+/* Hero Section */
+.hero {
+    padding-top: 8rem;
+    padding-bottom: 4rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+.hero-content {
+    margin-bottom: 3rem;
+    padding: 0 1rem;
+}
+.badge {
+    display: inline-block;
+    background-color: var(--bg-alt);
+    color: var(--accent-color);
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+}
+.hero h1 {
+    font-size: 4rem;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(to right, #111827, #4b5563);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.hero-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    max-width: 600px;
+    margin: 0 auto 2rem;
+}
+.hero-visual {
+    width: 100%;
+    max-width: 1000px;
+    height: 500px;
+    border-radius: 1.5rem;
+    overflow: hidden;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+/* Sections */
+.section {
+    padding: 6rem 0;
+}
+.alt-bg {
+    background-color: var(--bg-alt);
+}
+.section-header {
+    text-align: center;
+    max-width: 700px;
+    margin: 0 auto 4rem;
+}
+.chapter-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--accent-color);
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.section-header h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+.section-header p {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+}
+/* Content Grid */
+.content-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 4rem;
+    align-items: center;
+}
+.text-block p {
+    margin-bottom: 1.5rem;
+    font-size: 1.125rem;
+}
+.stat-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: var(--card-shadow);
+    text-align: center;
+    border: 1px solid var(--border-color);
+}
+.stat-card h3 {
+    font-size: 3rem;
+    color: var(--accent-color);
+    margin-bottom: 0.5rem;
+}
+/* Charts */
+.chart-container-large {
+    position: relative;
+    height: 500px;
+    width: 100%;
+    margin-bottom: 4rem;
+    background: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: var(--card-shadow);
+}
+.chart-container-wide {
+    position: relative;
+    height: 400px;
+    width: 100%;
+    margin-bottom: 4rem;
+    background: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: var(--card-shadow);
+}
+.content-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+}
+.col h3 {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+}
+/* Split Layout */
+.split-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+}
+.feature-list {
+    list-style: none;
+    margin-top: 2rem;
+}
+.feature-list li {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    position: relative;
+}
+.feature-list li::before {
+    content: "•";
+    color: var(--accent-color);
+    position: absolute;
+    left: 0;
+    font-weight: bold;
+}
+.chart-side {
+    background: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: var(--card-shadow);
+    height: 400px;
+}
+/* Conclusion */
+.conclusion-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+}
+.card {
+    background: var(--bg-alt);
+    padding: 2rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-color);
+}
+.card h3 {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+}
+/* Footer */
+footer {
+    padding: 4rem 0;
+    text-align: center;
+    color: var(--text-secondary);
+    border-top: 1px solid var(--border-color);
+}
+/* Placeholders */
+.img-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    font-weight: 500;
+    min-height: 300px;
+    border-radius: 1rem;
+}
+.visual-break {
+    margin-top: 4rem;
+    height: 400px;
+    border-radius: 1rem;
+    overflow: hidden;
+}
+/* Responsive */
+@media (max-width: 768px) {
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    .content-grid, .content-columns, .split-layout, .conclusion-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+    .nav-links {
+        display: none; /* Simple hide for mobile for now */
+    }
+}