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 { <> +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 { <> #inputShape: int[] #outputShape: int[] +forward(input): double[][] +backward(gradient): double[][] +getParameters(): Map +updateParameters(optimizer): void } class TrainableLayer { <> #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 { <> #learningRate: double #neuralNetwork: NeuralNetwork +update(): void +updateEpoch(): void #createAuxParams(params): List #updateRule(params, grads, auxParams): void } class LearningRateDecayStrategy { <> #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", )