Compiler Visualizer

A Flask-based web application that visualizes all 7 phases of compilation for arithmetic expressions.

Features

• 7 Compilation Phases Visualization:

  1. Lexical Analysis (Tokenization)
  2. Syntax Analysis (AST Generation using Recursive Descent Parser)
  3. Semantic Analysis
  4. Intermediate Code Generation (3-address code)
  5. Code Optimization (Constant Folding)
  6. Code Generation (Assembly)
  7. Target Code Optimization

• Symbol Table Management: Variables are mapped to identifiers (id1, id2, etc.)

• Fully Offline: No external dependencies required at runtime

• Interactive Dashboard: Clean visualization of all phases side-by-side

• Support for:

  • Arithmetic operators: +, -, *, /
  • Parentheses for grouping
  • Multiple variables
  • Assignment expressions

Installation

1. Clone the repository:

git clone https://github.com/Anorak001/Compiler.git
cd Compiler

2. Create a virtual environment (optional but recommended):

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

pip install -r requirements.txt

Usage

1. Start the Flask server:

python app.py

2. Open your browser and navigate to:

http://localhost:5000

3. Enter an arithmetic expression (e.g., x = a + b * 60) and click "Compile"

4. View all 7 compilation phases and the symbol table

Example Expressions

• x = a + b * 60
• result = (a + b) * (c - d)
• y = 5 + 3 * 2
• z = (10 + 20) / 2

Architecture

Compiler Phases

1. Lexer (compiler_phases/lexer.py): Tokenizes input into meaningful tokens
2. Parser (compiler_phases/parser.py): Uses recursive descent to build an AST
3. Semantic Analyzer (compiler_phases/semantic_analyzer.py): Validates semantics
4. Intermediate Code Generator (compiler_phases/intermediate_code_generator.py): Generates 3-address code
5. Optimizer (compiler_phases/optimizer.py): Performs constant folding
6. Code Generator (compiler_phases/code_generator.py): Generates assembly code
7. Target Optimizer (compiler_phases/target_optimizer.py): Optimizes assembly code

Web Interface

• Frontend: HTML, CSS, JavaScript (vanilla)
• Backend: Flask
• All assets are local - no CDN dependencies for offline functionality

Technology Stack

• Backend: Python 3.x, Flask
• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Parser Type: Recursive Descent Parser

License

See LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.