EvoFusion: UI Simulation

A web-based research framework UI for the co-evolution of neural network activation and loss functions.

This project provides an interactive user interface to simulate and visualize a genetic algorithm that co-evolves activation and loss functions for neural networks. It leverages the Google Gemini API to dynamically generate novel symbolic functions and provide insightful analysis of the simulation results.

---

Key Features

• Interactive Simulation: Configure and run a simulated evolutionary process directly in your browser.
• Dynamic Visualization: Watch the performance of the function population evolve in real-time with charts tracking accuracy, F1 score, and convergence speed.
• AI-Powered Function Generation: Utilizes the Google Gemini API to generate an endless supply of novel, mathematically plausible activation and loss functions.
• AI-Generated Reports: At the end of a run, the Gemini API analyzes the results and provides a concise, insightful summary of the evolutionary process and the best-performing function pair.
• Modern UI/UX: Built with React, TypeScript, and Tailwind CSS for a responsive, clean, and intuitive user experience.
• No Backend Required: The entire simulation and visualization runs on the client-side, making it easy to run and explore.

How It Works

1. Configuration: The user sets the parameters for the simulation, including the dataset, neural network model, population size, and number of generations.
2. Initialization: The simulation begins by calling the Gemini API to generate an initial population of random activation/loss function pairs.
3. Evolution Loop: For each generation, the application simulates a training and evaluation process:
   • Fitness Evaluation: Function pairs are assigned simulated performance scores (accuracy, F1, etc.).
   • Selection: The best-performing pairs ("elites") are selected to move to the next generation.
   • Crossover & Mutation: New offspring are generated by calling the Gemini API again, simulating the creation of new functions inspired by the successful ones.
4. Visualization: The Evolution Dashboard updates in real-time, charting the average performance metrics and highlighting the best function pair found so far.
5. Final Report: Once the simulation completes or is stopped by the user, a final report is generated. The Gemini API provides a qualitative summary of the run's success, and the final "champion" function pair is displayed with its metrics.

Tech Stack

• Frontend: React, TypeScript
• Styling: Tailwind CSS
• Charting: Recharts
• AI Engine: Google Gemini API (@google/genai)

Code Structure

/
├── index.html              # Main HTML entry point
├── index.tsx               # React application root
├── App.tsx                 # Main component with state and simulation logic
├── components/
│   ├── ConfigurationPanel.tsx  # Initial settings form
│   ├── EvolutionDashboard.tsx  # Real-time visualization dashboard
│   └── ResultsReport.tsx       # Final report display
├── services/
│   └── geminiService.ts      # Handles all interactions with the Gemini API
├── types.ts                # TypeScript type definitions
└── constants.ts            # Application-wide constants

Running the Application

This application is designed to run in a browser-based development environment that provides a Google Gemini API key.

1. API Key: Ensure the environment variable process.env.API_KEY is populated with a valid Google Gemini API key.
2. Open index.html: Load the index.html file in a modern web browser. The application will start on the configuration screen.
3. Run Simulation: Configure your desired parameters and click "Start Evolution" to begin.