Magic Cube Solver — Web Interface

Group 16 · IF3070 Foundations of Artificial Intelligence · STEI ITB

A web interface for solving the 5×5×5 diagonal magic cube with local search and metaheuristic algorithms.

This repository holds a SvelteKit application that renders the cube in 3D, plots the objective function value over the course of the search, and replays the search as an animation. The algorithms themselves do not run in the browser: the app calls a Go + Fiber solver API that lives in a separate repository, magic-cube-core.

Built with

SvelteKit   Three.js   Chart.js   Tailwind   Vite

Links — Live demo · Solver API · Report (PDF, Indonesian)

---

Screenshots

1. The algorithm list comes from the API, not from the app.	2. Either objective function can be selected per run.
3. A seed makes the run exactly repeatable.	4. The finished search replays swap by swap alongside the plot.

Setup and Running the Program

Make sure the following are installed:

• Node.js (version 20 or newer): https://nodejs.org
• Git: https://git-scm.com/downloads

1. Clone this repository:

   git clone https://github.com/fetiai/magic-cube.git
   cd magic-cube

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   Open http://localhost:8000/magic-cube/.

4. Build for production:

   npm run build
   npm run preview

   The build produces static files in the build/ directory, ready to be served by GitHub Pages with no Node runtime.

Configuration

All settings are read from environment variables at build time. Their values are inlined into the bundle, so changing one requires a rebuild. Copy .env.example to .env.local for local development.

Variable	Default	Description
PUBLIC_MAGIC_CUBE_API	https://magic-cube.faizath.com	Address of the solver API
BASE_PATH	/magic-cube	Subpath the site is served from

The app is deployed to https://fetiai.github.io/magic-cube/, which is a subpath rather than a domain root. BASE_PATH is what prefixes every asset address; leaving it empty produces a build for a domain root.

⚠️ The API must allow this page's origin. The page and the API always sit on different origins, so CORS applies. Set MAGIC_CUBE_CORS_ORIGINS on the server to include https://fetiai.github.io for production and the Vite development server's address for local work. Note that an origin consists of the scheme and host only — the /magic-cube/ path is not part of it. Without this, every request is blocked by the browser with no meaningful message, and the symptoms look like a dead server.

To develop without a deployed API, run the solver locally from the magic-cube-core repository with go run ./cmd/server, then set PUBLIC_MAGIC_CUBE_API=http://127.0.0.1:3000.

How to Use

1. Pick an algorithm. The list, along with each algorithm's parameters, defaults and bounds, comes straight from the API rather than being written into the app.
2. Fill in parameters if needed. Leaving a field empty means using the server's default.
3. Fill in seed if you want an exactly repeatable run. If left empty, the server picks a seed and reports it with the result.
4. Press Run. The search runs as a background job, and its progress is shown while it proceeds. A running search can be cancelled.
5. Once it finishes, use the slider and the play button to replay the search, one swap at a time.

genetic is a population method: it has no single sequence of swaps to replay, so its initial and final cubes are shown side by side as static views next to the chart, with no slider.

Team and Division of Work

Thalita Zahra Sutejo 18222023 thalitazhrr thalitazahras	Report: Problem Description section Report: Objective Function Selection section Report: Implementation of 3 Local Search Algorithms (Hill-Climbing with Sideways Move, Random Restart Hill-Climbing, Stochastic Hill-Climbing) Report: Experimental Results and Analysis (Comparison of How Closely the Algorithms Approach the Global Optimum, and Comparison of the Algorithms' Search Results) Report: Sections 3.1 Conclusion and 3.2 Suggestions README Final revision of the report
Irfan Musthofa 18222056 IrfanMusthofa irfanmusthofa	Source code for the Genetic Algorithm Finalizing the source code for Steepest Ascent Hill-Climbing Finalizing the source code for Hill-Climbing with Sideways Move Finalizing the source code for Random Restart Hill-Climbing Finalizing the source code for Stochastic Hill-Climbing Finalizing the source code for Simulated Annealing Front-end development All testing and debugging Final revision of the report
Eleanor Cordelia 18222059 EleanorCordelia eleanorcordelia	Report: Problem Description section Report: Objective Function Selection section Report: Implementation of 3 Local Search Algorithms (Steepest Ascent Hill-Climbing, Simulated Annealing, Genetic Algorithm) Report: Experimental Results and Analysis (Comparison of Search Duration, Comparison of Algorithm Consistency, Parameter Variation in the Genetic Algorithm) Report: Section 3.2 Suggestions README Final revision of the report
Muhammad Faiz Atharrahman 18222063 faizath faizath	Source code for Steepest Ascent Hill-Climbing Source code for Hill-Climbing with Sideways Move Source code for Random Restart Hill-Climbing Source code for Stochastic Hill-Climbing Source code for Simulated Annealing 3D visualization Chart plotting and the objective value plots in the report

---

IF3070 Foundations of Artificial Intelligence · STEI ITB · 2024/2025-1

More at fetiai.github.io