pages/3_cafe_dl.py

import streamlit as st
from streamlit_mermaid import st_mermaid
from streamlit_extras.badges import badge

# Set page configuration
st.set_page_config(
    page_title="CafeDL Project | CV Journey",
    page_icon="☕",
    layout="wide",
    initial_sidebar_state="expanded",
)

# Title and introduction
st.header("☕ CafeDL - A Java Deep Learning Library")

st.markdown(
    """
### Building Neural Networks from Scratch in Java

CafeDL is a deep learning framework I developed from scratch during my Software Design undergraduate course. 
Inspired by Keras' architecture and API, it's an educational exploration of neural network fundamentals, 
implemented entirely in Java.

This project combines software engineering principles with machine learning concepts, demonstrating how
modern deep learning frameworks are designed under the hood.
"""
)

st.markdown(
    "[GitHub Repository: samuellimabraz/cafedl](https://github.com/samuellimabraz/cafedl)"
)

# Project motivation
st.markdown("---")
st.subheader("Project Motivation")

st.markdown(
    """
### Why Build a DL Framework from Scratch?

Most deep learning courses teach how to use existing frameworks like TensorFlow or PyTorch.
While valuable for practical applications, this approach often leaves engineers with knowledge gaps 
in the fundamental concepts that power these frameworks.

**By building CafeDL, I aimed to:**

- **Deepen Understanding:** Learn the mathematical foundations and computational challenges of neural networks
- **Apply Design Patterns:** Explore software architecture patterns in a complex domain
- **Bridge Engineering & ML:** Connect software engineering principles with machine learning concepts
- **Challenge Myself:** Implement gradient descent, backpropagation, convolutional operations, and more without relying on existing libraries
"""
)


# Technology Stack
st.markdown("---")
st.subheader("Technology Stack")

col1, col2 = st.columns(2)

with col1:
    st.markdown(
        """
    ### Core Technologies
    
    - **Java:** The entire library is implemented in pure Java
    - **ND4J (N-Dimensional Arrays for Java):** Used for tensor and matrix manipulation
    - **MongoDB & Morphia:** For Object Document Mapping (ODM) and persisting trained models
    - **JavaFX:** For the QuickDraw game interface
    
    ND4J provides efficient data structures similar to NumPy arrays, enabling vectorized operations
    while still implementing my own mathematical operations for learning purposes.
    """
    )

with col2:
    st.markdown(
        """
    ### Design Philosophy
    
    - **Educational Focus:** Prioritizes readability and understanding over raw performance
    - **Object-Oriented Design:** Heavy use of design patterns and clean architecture
    - **API Familiarity:** Interface inspired by Keras for intuitive model building
    - **Modularity:** Components are designed to be mixed and matched
    - **Extensibility:** Easy to add new layers, optimizers, and activation functions
    """
    )

# Key features
st.markdown("---")
st.subheader("Key Features of CafeDL")

col1, col2 = st.columns(2)

with col1:
    st.markdown(
        """
    ### Neural Network Components
    
    - **Layers:**
      - Dense (Fully Connected)
      - Convolutional 2D
      - Max Pooling 2D
      - Zero Padding 2D
      - Flattening
      - Dropout
    
    - **Activation Functions:**
      - ReLU
      - Leaky ReLU 
      - SiLU (Sigmoid Linear Unit)
      - Sigmoid
      - Tanh
      - Softmax
      - Linear
    
    - **Loss Functions:**
      - Mean Squared Error (MSE)
      - Binary Cross-Entropy
      - Categorical Cross-Entropy
      - Softmax Cross-Entropy
    """
    )

with col2:
    st.markdown(
        """
    ### Training Components
    
    - **Optimizers:**
      - SGD (Stochastic Gradient Descent)
      - SGD with Momentum
      - SGD with Nesterov Momentum
      - Regularized SGD
      - Adam
      - RMSProp
      - AdaGrad
      - AdaDelta
    
    - **Learning Rate Strategies:**
      - Linear Decay
      - Exponential Decay
    
    - **Metrics:**
      - Accuracy
      - Precision
      - Recall
      - F1 Score
      - MSE, RMSE, MAE
      - R²
    """
    )

# Data Processing Features
st.markdown("---")
st.subheader("Data Processing Features")

st.markdown(
    """
### Comprehensive Data Pipeline

- **Data Loading:** Utility functions to load and preprocess training/testing data
- **Preprocessing:** Tools for data normalization and transformation
  - StandardScaler
  - MinMaxScaler
  - One-hot encoding
- **Visualization:** Functions to plot model predictions and training performance
- **Image Utilities:** Convert between array and image formats
"""
)

# Example usage code
st.markdown("---")

# Add a more complete model example from the README
st.markdown("### Example: Building & Training a CNN Model")

st.code(
    """
DataLoader dataLoader = new DataLoader(root + "/npy/train/x_train250.npy", root + "/npy/train/y_train250.npy", root + "/npy/test/x_test250.npy", root + "/npy/test/y_test250.npy");
INDArray xTrain = dataLoader.getAllTrainImages().get(NDArrayIndex.interval(0, trainSize));
INDArray yTrain = dataLoader.getAllTrainLabels().reshape(-1, 1).get(NDArrayIndex.interval(0, trainSize));
INDArray xTest = dataLoader.getAllTestImages().get(NDArrayIndex.interval(0, testSize));
INDArray yTest = dataLoader.getAllTestLabels().reshape(-1, 1).get(NDArrayIndex.interval(0, testSize));

// Normalization
xTrain = xTrain.divi(255);
xTest = xTest.divi(255);
// Reshape
xTrain = xTrain.reshape(xTrain.rows(), 28, 28, 1);
xTest = xTest.reshape(xTest.rows(), 28, 28, 1);

NeuralNetwork model = new ModelBuilder()
    .add(new Conv2D(32, 2, Arrays.asList(2, 2), "valid", Activation.create("relu"), "he"))
    .add(new Conv2D(16, 1, Arrays.asList(1, 1), "valid", Activation.create("relu"), "he"))
    .add(new Flatten())
    .add(new Dense(178, Activation.create("relu"), "he"))
    .add(new Dropout(0.4))
    .add(new Dense(49, Activation.create("relu"), "he"))
    .add(new Dropout(0.3))
    .add(new Dense(numClasses,  Activation.create("linear"), "he"))
    .build();

int epochs = 20;
int batchSize = 64;

LearningRateDecayStrategy lr = new ExponentialDecayStrategy(0.01, 0.0001, epochs);
Optimizer optimizer = new RMSProp(lr);
Trainer trainer = new TrainerBuilder(model, xTrain, yTrain, xTest, yTest, new SoftmaxCrossEntropy())
        .setOptimizer(optimizer)
        .setBatchSize(batchSize)
        .setEpochs(epochs)
        .setEvalEvery(2)
        .setEarlyStopping(true)
        .setPatience(4)
        .setMetric(new Accuracy())
        .build();
trainer.fit();
""",
    language="java",
)

# Application: QuickDraw Game
st.markdown("---")
st.subheader("Application: QuickDraw Game Clone")

col1, col2 = st.columns(2)

with col1:
    st.markdown(
        """
    ### Project Demo: Real-time Drawing Recognition
    
    As a demonstration of CafeDL's capabilities, I developed a JavaFX application inspired by Google's QuickDraw game.
    
    **Features:**
    
    - Real-time classification of hand-drawn sketches
    - Drawing canvas with intuitive UI
    - Displays model confidence for each class
    - User feedback and game mechanics
    - 10 different object categories for classification
    - Database integration to store drawings and game sessions
    
    **Technical Implementation:**
    
    - **CNN Model:** Trained using CafeDL on the QuickDraw dataset
    - **Game Logic:** 4 rounds per session, requiring >50% confidence for success
    - **Database:** MongoDB for storing drawings and game statistics
    - **MVC Architecture:** Clean separation of game components using JavaFX
    """
    )

with col2:
    # Placeholder for QuickDraw game video
    st.video(
        "assets/quickdraw_game_video.mp4",
    )

# Regression Examples
st.markdown("---")
st.subheader("Regression Examples")

st.markdown(
    """
### Function Approximation Capabilities

CafeDL isn't limited to classification problems. It can also tackle regression tasks, approximating various functions:

- Linear regression
- Sine waves
- Complex 3D surfaces like Rosenbrock and Saddle functions

Example visualizations from the original project include:
"""
)


col1, col2 = st.columns(2)
col3, col4 = st.columns(2)

with col1:
    st.markdown("#### Saddle Function")
    st.image("assets/saddle_function2.png", use_container_width=True)

with col2:
    st.markdown("#### Rosenbrock Function")
    st.image("assets/rosenbrock2.png", use_container_width=True)

with col3:
    st.markdown("#### Sine Function")
    st.image("assets/sine.png", use_container_width=True)

with col4:
    st.markdown("#### Linear Regression")
    st.image("assets/linear.png", use_container_width=True)


# UML Diagrams with Mermaid
st.markdown("---")
st.subheader("CafeDL Architecture: UML Diagrams")

# Create all diagram file paths
diagram_files = {
    "Full Diagram": "assets/full_diagram.md",
    "Layers": "assets/layers_diagram.md",
    "Activations": "assets/activations_diagram.md",
    "Models": "assets/models_diagram.md",
    "Optimizers": "assets/optimizers_diagram.md",
    "Losses": "assets/losses_diagram.md",
    "Metrics": "assets/metrics_diagram.md",
    "Data": "assets/data_diagram.md",
    "Database": "assets/database_diagram.md",
    "Train": "assets/train_diagram.md",
}


# Function to extract Mermaid diagram text from .md files
def extract_mermaid_from_md(file_path):
    try:
        with open(file_path, "r") as file:
            content = file.read()
            # Extract the Mermaid content between the ```mermaid and ``` tags
            if "```mermaid" in content and "```" in content:
                start_idx = content.find("```mermaid") + len("```mermaid")
                end_idx = content.rfind("```")
                return content[start_idx:end_idx].strip()
            return None
    except Exception as e:
        st.error(f"Error reading diagram file {file_path}: {e}")
        return None


# Display diagrams sequentially
st.info(
    "The following UML diagrams represent the architecture of the CafeDL framework, organized by namespace."
)

# For each diagram, display it sequentially
for name, file_path in diagram_files.items():
    st.markdown(f"### {name}")
    st.markdown(f"UML class diagram showing the {name.lower()} structure.")

    mermaid_content = extract_mermaid_from_md(file_path)

    if mermaid_content:
        st_mermaid(mermaid_content)
    else:
        st.warning(f"Could not load diagram from {file_path}")

        # Fallback diagrams for common namespace views
        if name == "Activations":
            st_mermaid(
                """
                classDiagram
                    class IActivation {
                        <<interface>>
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class Sigmoid {
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class TanH {
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class ReLU {
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class LeakyReLU {
                        -alpha: double
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class Linear {
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class SiLU {
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class Softmax {
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    IActivation <|.. Sigmoid
                    IActivation <|.. TanH
                    IActivation <|.. ReLU
                    IActivation <|.. LeakyReLU
                    IActivation <|.. Linear
                    IActivation <|.. SiLU
                    IActivation <|.. Softmax
                """
            )
        elif name == "Layers":
            st_mermaid(
                """
                classDiagram
                    class Layer {
                        <<abstract>>
                        #inputShape: int[]
                        #outputShape: int[]
                        +forward(input): double[][]
                        +backward(gradient): double[][]
                        +getParameters(): Map<String, double[][]>
                        +updateParameters(optimizer): void
                    }
                    
                    class TrainableLayer {
                        <<abstract>>
                        #params: INDArray
                        #grads: INDArray
                        #trainable: boolean
                        +setup(input): void
                        +getParams(): INDArray
                        +getGrads(): INDArray
                    }
                    
                    class Dense {
                        -weights: INDArray
                        -bias: INDArray
                        -activation: IActivation
                        +Dense(units, activation)
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class Conv2D {
                        -filters: INDArray
                        -biases: INDArray
                        -kernelSize: int[]
                        -strides: int[]
                        -padding: String
                        -activation: IActivation
                        +Conv2D(filters, kernelHeight, kernelWidth, activation, padding)
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class MaxPooling2D {
                        -poolSize: int[]
                        -strides: int[]
                        +MaxPooling2D(poolHeight, poolWidth, strides)
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class Flatten {
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class Dropout {
                        -rate: double
                        -mask: INDArray
                        +Dropout(rate)
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    class ZeroPadding2D {
                        -padding: int
                        +ZeroPadding2D(padding)
                        +forward(input): INDArray
                        +backward(gradient): INDArray
                    }
                    
                    Layer <|-- TrainableLayer
                    TrainableLayer <|-- Dense
                    TrainableLayer <|-- Conv2D
                    Layer <|-- MaxPooling2D
                    Layer <|-- Flatten
                    Layer <|-- Dropout
                    Layer <|-- ZeroPadding2D
                    Conv2D --> ZeroPadding2D : uses
                """
            )
        elif name == "Optimizers":
            st_mermaid(
                """
                classDiagram
                    class Optimizer {
                        <<abstract>>
                        #learningRate: double
                        #neuralNetwork: NeuralNetwork
                        +update(): void
                        +updateEpoch(): void
                        #createAuxParams(params): List<INDArray>
                        #updateRule(params, grads, auxParams): void
                    }
                    
                    class LearningRateDecayStrategy {
                        <<abstract>>
                        #decayPerEpoch: double
                        #learningRate: double
                        +updateLearningRate(): double
                    }
                    
                    class SGD {
                        +SGD(learningRate)
                        #updateRule(params, grads, auxParams): void
                    }
                    
                    class SGDMomentum {
                        -momentum: double
                        +SGDMomentum(learningRate, momentum)
                        #updateRule(params, grads, auxParams): void
                    }
                    
                    class Adam {
                        -beta1: double
                        -beta2: double
                        -epsilon: double
                        +Adam(learningRate, beta1, beta2, epsilon)
                        #updateRule(params, grads, auxParams): void
                    }
                    
                    class RMSProp {
                        -decayRate: double
                        -epsilon: double
                        +RMSProp(learningRate, decayRate, epsilon)
                        #updateRule(params, grads, auxParams): void
                    }
                    
                    Optimizer <|-- SGD
                    Optimizer <|-- SGDMomentum
                    Optimizer <|-- Adam
                    Optimizer <|-- RMSProp
                    
                    LearningRateDecayStrategy <|-- ExponentialDecayStrategy
                    LearningRateDecayStrategy <|-- LinearDecayStrategy
                    
                    Optimizer o-- LearningRateDecayStrategy
                """
            )

    # Add a separator between diagrams
    st.markdown("---")

# Technical challenges
st.markdown("---")

st.markdown(
    """
### Key Learning Outcomes

- **Deep Understanding of Neural Networks:** Gained insights into the mathematical foundations of deep learning
- **Software Design Patterns:** Applied OOP principles to a complex domain
- **Algorithm Implementation:** Translated mathematical concepts into efficient code
- **Performance Optimization:** Balanced readability with computational efficiency
- **Full Stack Development:** Combined ML models with UI and database components
- **Documentation & API Design:** Created an intuitive interface for users
"""
)

# Conclusion and future work
st.markdown("---")
st.subheader("Conclusion & Future Work")

st.markdown(
    """
### Project Impact & Next Steps

The CafeDL project successfully demonstrates how modern deep learning frameworks function internally,
while providing a practical educational tool for exploring neural network concepts.

**Future Enhancements:**
- Additional layer types (LSTM, GRU, BatchNorm)
- More optimization algorithms
- Transfer learning capabilities
- Data augmentation pipeline
- Enhanced visualization tools
- Performance optimizations

This project represents the intersection of software engineering principles and machine learning concepts,
providing a foundation for deeper exploration of both fields.
"""
)

badge(
    type="github",
    name="samuellimabraz/cafedl",
    url="https://github.com/samuellimabraz/cafedl",
)