Skip to content

Code Corrector

This project is a Multi-Modal Code Refactorer with Visual Verification, built in one day.

Code Video Cerebral Valley

Core trick

Renders refactored frontend code in an isolated sandbox and feeds the real screenshot back to Gemini for visual verification.

Tags

dev toolsvision

Description

This project is a Multi-Modal Code Refactorer with Visual Verification, built in one day. It solves a common and time-consuming problem in software development: understanding and improving messy or legacy code while ensuring that UI components look and function as intended. The system allows a user to upload backend or frontend code, including React components, HTML, and CSS. It then uses Gemini 3 and Nano Banana Pro to refactor the code, improve structure, apply best practices, and explain its changes. For frontend code, the system also runs the code in an isolated environment and captures a real, non-hallucinated rendering of the UI. Gemini then reviews the real visual output and provides a corrected or improved version of both the code and the interface. This provides a fast, accurate way to clean up codebases while ensuring the UI behaves as expected.
asaltveit/visual-code-corrector★ 00 forksTypeScriptCreated Dec 6, 2025 · last push Dec 7, 2025

README excerpt

# Multi-Modal Code Refactorer with Visual Verification

An AI-powered tool to refactor code, generate unit tests, and create visual verification mockups using **Gemini 3** (Code Reasoning) and **Nano Banana Pro** (Visual Generation).

Created during the Gemini 3 Hackathon SF hackathon 12/06/25.

## Features

*   **Semantic Refactoring**: Uses Gemini 3 to analyze messy/legacy code, improve logic, accessibility, and modern practices.
*   **Automated Unit Tests**: Generates a comprehensive test suite for the refactored code.
*   **Visual Verification (New!)**:
    *   Generates a "Before" render of the original messy code.
    *   Generates an "After" render of the cleaned refactored code.
    *   Displays them side-by-side to visually confirm that the visual output remains consistent (or improves) while the underlying code quality increases.
*   **Client-Side Only**: No database or backend required. Runs entirely in the browser using the Gemini API.
*   **History**: Persists your refactoring sessions in LocalStorage.

## Tech Stack

*   **Framework**: Next.js 14 (App Router) / React
*   **Styling**: TailwindCSS + Lucide React Icons
*   **AI Models**:
    *   `gemini-3-pro-preview`: Code logic, refactoring, tests.
    *   `gemini-3-pro-image-preview` (Nano Banana Pro): Visual rendering of code components.

## Setup

1.  Clone the repository.
2.  Install dependencies: `npm install`
3.  Create a `.env.local` file with your Gemini API Key:
    ```bash
    NEXT_PUBLIC_GEMINI_API_KEY

Team