404 Afterlife: Bringing Forgotten Websites Back to Life with Open-Weight AI

sozan alkouz — Sat, 31 Oct 2026 20:55:55 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine.

Dead Websites. Reborn Experiences. Preserved Memories.

What I Built

What happens when a website is forgotten?

Behind an outdated website, an abandoned domain, or a broken link, there may be a story worth preserving: someone's first portfolio, a small business, an old community, or a piece of internet history.

Inspired by the Ghost in the Machine theme, our three-member team created 404 Afterlife, an AI-assisted website preservation and modernization application powered by locally running open-weight artificial intelligence.

Our mission is simple:

Bring forgotten websites back to life without erasing their original identity.

Instead of asking AI to invent an unrelated website, 404 Afterlife analyzes original web pages, examines their structure, and applies a modern design direction while preserving existing content, navigation references, and assets.

Key Features

1. Website Recovery and Import

Users can upload an existing website as a ZIP archive or recover historical website snapshots by entering a URL.

Our archive recovery workflow attempts to use the Internet Archive's Wayback Machine first, with Arquivo.pt as an alternative source when needed.

Archive recovery depends on snapshot availability and external service access.

2. Website Structure Analysis

Our analyzer examines HTML documents and extracts:

Page titles, headings, and paragraphs.
Navigation links and internal references.
Images and referenced assets.
HTML structure and layout information.
Broken links and missing resources.

The extracted information helps the system understand the original website before redesigning it.

3. AI-Powered Design Planning with Gemma

We integrated Google Gemma 3 1B, running locally through Ollama, to generate structured website design plans.

Rather than allowing AI to independently redesign every page, the model examines an overview of the website and selects a shared visual theme and layout.

This helps create a more consistent experience across multiple pages.

4. Multi-Page Website Modernization

A Python-based transformation layer applies responsive HTML/CSS styling to the website's original documents.

Our approach separates the AI's design decisions from the actual file transformations, reducing the risk of accidentally replacing original content.

5. Safe CSS Refresh — An AI-Free Alternative

404 Afterlife also provides a lightweight CSS-only redesign option.

Users can select Safe CSS Refresh to modernize a website's visual appearance without running a local AI model.

Unlike the Gemma-powered workflow, this mode uses a deterministic CSS-based styling approach rather than AI-generated design planning.

This provides an alternative when Ollama or Gemma is unavailable, or when users prefer a simpler redesign method.

6. Content Preservation and Validation

Our validation workflow checks whether redesigned pages retain their original visible text, links, image references, and protected script content.

7. Interactive Streamlit Application

Our application brings together website ingestion, analysis, redesign method selection, before-and-after previews, and ZIP export.

Users can choose between two redesign methods directly in the interface:

Local Gemma (Ollama) — AI-assisted design planning.
Safe CSS Refresh — Deterministic CSS-based modernization without AI inference.

8. Experimental Missing-Page Reconstruction

We also developed an experimental workflow that identifies missing linked HTML pages and generates proposed reconstructions based on available evidence.

These reconstructions are clearly labeled as proposals rather than authentic historical recoveries.

Our Goal

Modernize the experience. Preserve the history.

404 Afterlife explores how open-weight AI and practical web development tools can support digital preservation while respecting the websites that people originally created.

Demo

Watch 404 Afterlife in Action

404 Afterlife — Demo Video and Project Files

Our application runs locally using Python, Streamlit, Ollama, and Gemma 3 1B.

Demonstration Workflow

Our demo showcases the following workflow:

Import an old website as a ZIP archive.
Analyze its HTML structure, navigation, and assets.
Select Local Gemma (Ollama) for AI-assisted modernization.
Generate a shared design plan and apply it across the website pages.
Validate the preservation of important content.
Compare the website before and after modernization.
Export the updated website as a ZIP archive.
Demonstrate the alternative Recover from URL input method.

The interface also offers Safe CSS Refresh, allowing users to modernize a website without running Gemma.

This gives users flexibility between AI-assisted redesign and a lightweight CSS-based alternative.

Before and After: Retro Tech Store

For our demonstration, we used a fictional retro technology store website containing multiple HTML pages, a stylesheet, and an SVG logo.

Before — Original Website

The original website featured a beige background, traditional typography, basic text navigation, and a simple content layout.

It included a Featured Collection section, an Our Mission section, an SVG logo, and a basic search interface.

After — AI-Assisted Modernization

The redesigned website introduced a more structured layout, a coordinated purple-toned design, improved typography, clearer navigation buttons, and better visual organization.

The before-and-after comparison was captured directly from our Streamlit application.

A Real Gemma Design Decision

During local testing, Gemma 3 1B generated the following shared design configuration:

{
  "theme": "sunset",
  "layout": "minimal"
}

Our execution log confirmed:

AI used: True
Fallback:
PASS: Malak validator
PASS: Original HTML pages preserved
PASS: Images and other assets unchanged
PASS: Final ZIP verified
END-TO-END TEST SUCCESS

The empty fallback field confirmed that Gemma generated a valid design plan rather than relying on the default configuration in this test.

In this integration test, the input website contained two HTML documents, one CSS stylesheet, and one SVG asset.

The resulting website passed the preservation validator, retained the original pages and non-HTML assets, and produced a valid ZIP archive.

Improving the User Experience

Our first visual tests revealed an important challenge: preserving the original HTML structure does not automatically guarantee a good user experience.

Some early redesigns had CSS conflicts that caused poor text contrast, navigation labels that were difficult to read, and inconsistent styling between pages.

We investigated these issues and refined the presentation.

Our later Retro Tech Store comparison demonstrated clearer navigation buttons, improved title readability, and a more structured content layout.

This experience reinforced one of our most important lessons:

A successful modernization needs both technical correctness and thoughtful UI/UX design.

Code

GitHub Repository

404 Afterlife — GitHub Repository

404 Afterlife is built primarily with Python and combines website analysis, local AI inference, HTML/CSS transformation, validation, and an interactive Streamlit application.

Technology Stack

Python — Core backend logic, website processing, and transformation.

Streamlit — Interactive application, website import, redesign method selection, before-and-after previews, and ZIP export.

BeautifulSoup — HTML parsing, content extraction, and structural analysis.

Gemma 3 1B — Open-weight AI model used for website design planning.

Ollama — Local AI model inference.

HTML and CSS — Website modernization and responsive styling.

Wayback Machine and Arquivo.pt — Sources used by the historical website recovery workflow.

Pytest — Automated testing and validation.

Git and GitHub — Version control and team collaboration.

Project Architecture

Our application is divided into cooperating components.

Website Ingestion

Receives user-uploaded ZIP files or retrieves available archived website snapshots from a URL.

Website Analysis

Examines original HTML pages, navigation references, images, and structural information.

Redesign Method Selection

Users select one of two approaches:

Local Gemma (Ollama) for AI-assisted design planning.
Safe CSS Refresh for deterministic styling without AI inference.

AI Design Planning

When Gemma is selected, the model chooses a shared visual direction from an overview of the website.

HTML/CSS Transformation

Applies the selected styling approach across the original documents.

Preservation Validation

Checks that modified documents satisfy important content-preservation requirements.

Streamlit Application

Brings together website processing, redesign options, previews, and ZIP export in a user-facing experience.

Important Implementation Components

Our development work includes:

analyzer.py — Website content and structure analysis.
ai_engine.py — Local AI redesign logic.
whole_site_adapter.py — Shared design planning and whole-site transformation.
html_renderer.py — HTML rendering for reconstruction workflows.
html_validator.py — Generated HTML validation.
missing_page_recovery.py — Experimental missing-page reconstruction.
multi_page_redesign.py — Multi-page redesign experiments.
full_site/app.py — Streamlit application.
full_site/services/ai_bridge.py — AI integration and preservation checks.
full_site/services/site_bundle.py — Website file processing and packaging.

The project was developed collaboratively using Git branches, shared interfaces, and automated tests.

How I Built It

1. Starting with Website Preservation

Our first challenge was understanding existing websites before attempting to modernize them.

An old website is more than its visible text. It may contain interconnected pages, images, navigation elements, stylesheets, scripts, and additional resources.

We developed HTML analysis functionality to inspect these elements and extract useful structural information.

This provided a foundation for making informed design decisions rather than blindly replacing the original website.

2. Choosing an Open-Weight AI Model

We selected Google Gemma 3 1B, running locally through Ollama.

We wanted a lightweight model that would allow us to experiment with AI-assisted website modernization without depending on a paid hosted inference API.

Our initial approach involved redesigning individual pages independently.

However, this introduced a problem.

Different pages could receive different themes or layouts, making the website feel visually disconnected.

3. Introducing Whole-Site AI Planning

To address this challenge, we developed the Whole-Site AI Adapter.

Instead of asking Gemma to rewrite every HTML file, the adapter prepares a compact overview of the website, including page titles and headings.

Gemma then selects a single theme and layout for the entire website.

For example:

{
  "theme": "forest",
  "layout": "editorial"
}

Python translates the selected design into a shared responsive CSS layer.

This gives the AI responsibility for high-level design decisions while allowing deterministic code to control the actual transformations.

We found this separation more predictable and easier to validate than asking a small language model to regenerate every page from scratch.

4. Designing for Content Preservation

One of our biggest concerns was preventing AI-assisted redesign from losing original website information.

If an AI model completely regenerates an old website, it may unintentionally remove text, links, images, or other important details.

To reduce this risk, we introduced an integration contract based on the website's original file paths.

For example:

{
  "files": {
    "index.html": "<!doctype html>...",
    "about.html": "<!doctype html>..."
  }
}

The redesigned output is expected to contain the original HTML pages.

Our backend checks:

Coverage of original HTML pages.
Approximate preservation of visible text.
Original anchor references.
Original image references.
Protection of existing scripts and inline event handlers.

Non-HTML assets remain part of the original website bundle.

These checks help ensure that modernization focuses on improving presentation without unnecessarily changing the original content.

5. Integrating Gemma with Streamlit

We used Streamlit to create the interactive application.

The website processing system handles ingestion, analysis, preview generation, validation, and export.

The AI components are responsible for design planning.

Gemma is connected to the Streamlit workflow through our integration components, allowing AI-assisted modernization to participate in the application pipeline.

Our modular architecture separates AI inference, website transformation, and user interaction.

This made it possible to develop and test individual components before evaluating the integrated workflow.

6. Safe CSS Refresh: An Alternative Redesign Method

In addition to Gemma-powered modernization, we implemented a Safe CSS Refresh mode.

Users can choose between Local Gemma (Ollama) and Safe CSS Refresh directly in the Streamlit interface.

The Gemma option uses an open-weight AI model to generate design decisions.

Safe CSS Refresh follows a deterministic CSS-based workflow without requiring AI inference.

This makes the application more flexible, particularly when users want a lightweight redesign or do not have Ollama running.

Importantly, Safe CSS Refresh is a styling alternative, not a claim that the application can recover every missing CSS file from an archived website.

7. Exploring Missing-Page Reconstruction

During development, we encountered another preservation challenge.

An archived homepage might link to about.html, even when that page is missing from the available files.

We developed a separate experimental reconstruction workflow that can create proposed replacement pages based on existing evidence.

Importantly, these pages are labeled as proposed reconstructions instead of being presented as authentic historical content.

This distinction reflects an important principle of responsible AI development:

AI can help reconstruct an experience, but it should not invent history and present it as fact.

8. Automated Testing and Integration

Testing played an important role throughout development.

Our recorded results included:

18 passing tests in the most recent observed analyzer and AI test run.

35 passing tests in a previously recorded full-site backend test run.

We also performed live integration testing involving Gemma 3 1B, the Whole-Site Adapter, and the preservation validator.

In a ZIP-based test, the original website contained:

Two HTML pages.
One CSS stylesheet.
One SVG image asset.

Gemma successfully generated a shared design plan.

The redesigned pages passed the validator, original non-HTML assets were retained, and the final ZIP passed an archive integrity check.

These results describe our recorded tests on the relevant components and sample website, rather than exhaustive support for every historical website.

9. Improving UI/UX Through Testing

One of our most valuable discoveries happened after automated tests succeeded.

When we opened the generated website in a browser, we identified problems with visual consistency and readability.

Some navigation elements had low contrast, and pages with different HTML structures did not receive the same visual treatment.

This revealed a practical limitation of applying shared CSS to existing websites: different original structures and existing styles can produce unexpected results.

We refined the presentation and continued evaluating the website through before-and-after comparisons.

Our updated Retro Tech Store homepage showed clearer navigation buttons, improved title contrast, and better content organization.

This reinforced an important engineering lesson:

Passing automated tests does not automatically mean that an interface provides a good user experience.

10. Lessons Learned

AI does not have to generate everything.

Using Gemma for design planning and Python for controlled transformations made the workflow easier to understand and validate.

Preservation must be a technical requirement.

A modern-looking page is not a successful restoration if it loses important original information.

Multi-page websites need a unified design system.

A website should feel like one connected experience rather than a collection of unrelated pages.

Providing multiple redesign methods improves flexibility.

Gemma-powered design and Safe CSS Refresh serve different needs, allowing users to choose between AI-assisted planning and deterministic styling.

Automated testing and visual testing complement one another.

Both are necessary for building reliable user-facing applications.

Why Does Open Innovation Matter?

Open innovation was central to our project.

404 Afterlife explores how accessible technologies can support the preservation of forgotten parts of the web.

Local AI and Developer Control

Gemma 3 1B runs locally through Ollama.

This allows our design-planning workflow to operate without requiring a paid hosted inference service.

It also gives developers greater control over the inference environment.

Accessible Experimentation

Local inference allowed us to experiment with prompts, structured JSON responses, fallback handling, and design configurations without paying per-request model inference charges.

This was especially valuable when debugging invalid AI design plans and improving output consistency.

Transparency and Flexibility

We can inspect and modify our AI integration, transformation logic, and validation rules.

Our modular approach also provides opportunities to experiment with alternative compatible models in the future.

The Safe CSS Refresh option further demonstrates that AI can be used selectively rather than being required for every operation.

Preserving the Open Web

Much of the early internet was built through creativity, experimentation, and accessible development tools.

We wanted our preservation-oriented project to reflect that same spirit.

By combining local AI with open development technologies, 404 Afterlife explores an accessible approach to preserving and modernizing older websites.

The technology used to preserve digital history should remain accessible to the people who care about it.

The Spirit of It

The internet is full of forgotten places.

Some old websites were built by people writing their first lines of HTML. Others belonged to small businesses, communities, portfolios, or personal projects.

Their design may no longer meet modern expectations, but that does not mean their content has lost its value.

Our project began with a simple question:

What if we could give old websites another chance without erasing their stories?

Throughout development, we learned that bringing a website back to life is not simply about changing colors or rearranging layouts.

It is also about preserving original information, understanding what has been lost, and being transparent about what AI can and cannot reconstruct.

Our journey included analyzing HTML, experimenting with local AI, debugging model responses, improving page consistency, and validating redesigned website files.

For us, 404 Afterlife represents an attempt to connect artificial intelligence with digital memory.

Because sometimes, a website deserves more than a 404.

It deserves an afterlife.

Meet the Team

404 Afterlife was developed by three students combining website analysis, artificial intelligence, and application development.

Sozan — Website Analysis and Preservation

Responsible for HTML analysis, content extraction, broken-link and missing-asset detection, website structure examination, and analyzer testing.

DEV: @sozan_alkouz_1e9a5fc2a2a1

Rana — AI Engineering and Redesign

Responsible for Gemma integration, structured AI planning, HTML rendering and validation, whole-site redesign, and experimental missing-page reconstruction.

DEV: @rana_4a6f402a1eba49668fe1

Malak — Streamlit Application and Integration

Responsible for the Streamlit application, website ingestion workflows, before-and-after previews, AI integration, ZIP export, and application testing.

DEV: @malak_mahmoud_383bb895703

Our collaboration brought together complementary technical skills to explore how AI can help preserve forgotten websites.

Prize Categories

Best Use of Gemma

We are entering the Best Use of Gemma category.

404 Afterlife uses Google's Gemma 3 1B open-weight model through Ollama to generate structured, site-wide design plans.

The model contributes directly to the website modernization process by selecting a shared visual theme and layout.

By combining Gemma with deterministic HTML/CSS transformations and preservation checks, our project demonstrates how an open-weight model can support a digital preservation workflow.

The additional Safe CSS Refresh option also highlights how we designed the application to remain usable for basic modernization without requiring AI inference.

404 Afterlife — Dead Websites. Reborn Experiences. Preserved Memories.

Built for Hacktoberfest 2026 — Ghost in the Machine.

DEV Community: sozan alkouz