# asiyaibrahim478/connect_4_game architecture

> Architecture diagram of the GitHub repository asiyaibrahim478/connect_4_game, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/asiyaibrahim478/connect_4_game
- Repository: https://github.com/asiyaibrahim478/connect_4_game

## Overview

This repository implements a Connect Four game with two user-facing options: a browser client backed by Flask APIs and a Streamlit application. In the browser flow, a player makes moves, Flask selects an AI move, and finished games are saved; recorded data can feed model retraining. Training combines available datasets, evaluates three classifiers, and selects an active model. README contains no capability details, and the Streamlit excerpt is partial, so its unshown runtime connections are omitted.

Main entry points: [`app.py`](https://github.com/asiyaibrahim478/connect_4_game/blob/main/app.py) (Flask API), [`train_models.py`](https://github.com/asiyaibrahim478/connect_4_game/blob/main/train_models.py) (Model training), [`main.py`](https://github.com/asiyaibrahim478/connect_4_game/blob/main/main.py) (Streamlit launcher), [`script.js`](https://github.com/asiyaibrahim478/connect_4_game/blob/main/script.js) (Browser game)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_game["Game interfaces"]
  node_browser["Browser game<br/>[script.js]"]
  node_web_ui["Game page<br/>[index.html]"]
  node_streamlit["Streamlit game<br/>[streamlit_app.py]"]
end

subgraph group_backend["Game backend"]
  node_flask["Flask API<br/>[app.py]"]
  node_ai["AI move search<br/>[app.py]"]
  node_pipeline["Streamlit launcher<br/>[main.py]"]
end

subgraph group_learning["Model learning"]
  node_trainer["Model training<br/>[train_models.py]"]
  node_models["Saved classifiers"]
end

subgraph group_data["Game data"]
  node_game_store[("Game history storage<br/>[connect_db.py]")]
  node_dataset["Training data loader<br/>[connect_db.py]"]
end

node_player(("Player"))

node_player -->|"plays"| node_browser
node_browser -->|"renders board"| node_web_ui
node_browser -->|"requests moves"| node_flask
node_flask -->|"dispatches search"| node_ai
node_flask -->|"saves result"| node_game_store
node_player -.->|"plays"| node_streamlit
node_flask -->|"loads classifier"| node_models
node_flask -->|"starts retraining"| node_trainer
node_trainer -->|"loads data"| node_dataset
node_trainer -->|"writes classifiers"| node_models
node_game_store -.->|"provides history"| node_dataset
node_pipeline -->|"sets up table"| node_game_store
node_pipeline -->|"runs training"| node_trainer
node_pipeline -->|"starts app"| node_streamlit

click node_browser "https://github.com/asiyaibrahim478/connect_4_game/blob/main/script.js"
click node_web_ui "https://github.com/asiyaibrahim478/connect_4_game/blob/main/index.html"
click node_streamlit "https://github.com/asiyaibrahim478/connect_4_game/blob/main/streamlit_app.py"
click node_flask "https://github.com/asiyaibrahim478/connect_4_game/blob/main/app.py"
click node_ai "https://github.com/asiyaibrahim478/connect_4_game/blob/main/app.py"
click node_game_store "https://github.com/asiyaibrahim478/connect_4_game/blob/main/connect_db.py"
click node_dataset "https://github.com/asiyaibrahim478/connect_4_game/blob/main/connect_db.py"
click node_trainer "https://github.com/asiyaibrahim478/connect_4_game/blob/main/train_models.py"
click node_models "https://github.com/asiyaibrahim478/connect_4_game/tree/main/models"
click node_pipeline "https://github.com/asiyaibrahim478/connect_4_game/blob/main/main.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_browser,node_web_ui,node_streamlit toneBlue
class node_flask,node_ai,node_pipeline toneAmber
class node_trainer,node_models toneMint
class node_game_store,node_dataset toneRose
class node_player toneIndigo
```

## Components

### Game interfaces

- [Browser game](https://github.com/asiyaibrahim478/connect_4_game/blob/main/script.js): `script.js`
- [Game page](https://github.com/asiyaibrahim478/connect_4_game/blob/main/index.html): `index.html`
- [Streamlit game](https://github.com/asiyaibrahim478/connect_4_game/blob/main/streamlit_app.py): `streamlit_app.py`

### Game backend

- [Flask API](https://github.com/asiyaibrahim478/connect_4_game/blob/main/app.py): `app.py`
- [AI move search](https://github.com/asiyaibrahim478/connect_4_game/blob/main/app.py): `app.py`
- [Streamlit launcher](https://github.com/asiyaibrahim478/connect_4_game/blob/main/main.py): `main.py`

### Model learning

- [Model training](https://github.com/asiyaibrahim478/connect_4_game/blob/main/train_models.py): `train_models.py`
- [Saved classifiers](https://github.com/asiyaibrahim478/connect_4_game/tree/main/models): `models`

### Game data

- [Game history storage](https://github.com/asiyaibrahim478/connect_4_game/blob/main/connect_db.py): `connect_db.py`
- [Training data loader](https://github.com/asiyaibrahim478/connect_4_game/blob/main/connect_db.py): `connect_db.py`

### Other components

- **Player**

## Connections

- Player → Browser game: plays (evidence: `script.js`)
- Browser game → Game page: renders board (evidence: `script.js`)
- Browser game → Flask API: requests moves (evidence: `script.js`)
- Flask API → AI move search: dispatches search (evidence: `app.py`)
- Flask API → Game history storage: saves result (evidence: `app.py`)
- Player → Streamlit game: plays
- Flask API → Saved classifiers: loads classifier (evidence: `app.py`)
- Flask API → Model training: starts retraining (evidence: `app.py`)
- Model training → Training data loader: loads data (evidence: `train_models.py`)
- Model training → Saved classifiers: writes classifiers (evidence: `train_models.py`)
- Game history storage → Training data loader: provides history (evidence: `connect_db.py`)
- Streamlit launcher → Game history storage: sets up table (evidence: `main.py`)
- Streamlit launcher → Model training: runs training (evidence: `main.py`)
- Streamlit launcher → Streamlit game: starts app (evidence: `main.py`)