Upload 11 files

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "-w", "20", "main:app"]

app.py

@@ -0,0 +1,51 @@
+import base64
+from flask import Flask, request, jsonify, render_template
+from io import BytesIO
+from maincode import *
+import re
+
+app = Flask(__name__)
+
+def calculate(expression):
+    try:
+        result = []
+        for eq in expression:
+            result.append(eval(eq.replace("=", "")))
+        print(result)
+        return result
+    except Exception as e:
+        print(f"Error : {e}")
+        return []
+
+def advanced_calculator(text):
+    pattern = r'(\d+(?:\s*[+\-*/]\s*\d+)*)\s?='
+    matches = re.findall(pattern, text)
+    filtered_expressions = []
+    for match in matches:
+        equation = match + '='
+        remaining_text = text[text.find(equation)+len(equation):].strip()
+        if remaining_text and remaining_text[0].isdigit():
+            continue
+        filtered_expressions.append(equation.replace(" ", "").strip())
+    return calculate(filtered_expressions)
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/whitebai', methods=['POST'])
+def whitebai():
+    data = request.get_json()
+    image_data = data.get('image')
+    if not image_data:
+        return jsonify({'message': 'No image data received'}), 400
+    image_data = image_data.split(',')[1]
+    image_bytes = base64.b64decode(image_data)
+    image_file = BytesIO(image_bytes)
+    elt = ExtractTextFromImage(image_file)
+    elt.process_file()
+    dat = elt.get_text()
+    return jsonify({'message': advanced_calculator(dat)})
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,3 @@
+requests
+flask
+gunicorn

static/css/style.css

@@ -0,0 +1,171 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.whiteboard-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+#whiteboard {
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.brush-preview {
+  position: fixed;
+  pointer-events: none;
+  border: 1px solid #000;
+  border-radius: 50%;
+  display: none;
+}
+
+.bottom-toolbar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  z-index: 1000;
+  transition: transform 0.3s ease;
+}
+
+.bottom-toolbar.hidden .toolbar-content {
+  display: none;
+}
+
+.bottom-toolbar.hidden .toggle-btn .material-icons {
+  transform: rotate(180deg);
+}
+
+.toggle-btn {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(-100%);
+  border-radius: 8px 8px 0 0;
+  padding: 4px 16px;
+  background: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+}
+
+.toggle-btn .material-icons {
+  transition: transform 0.3s ease;
+}
+
+.toolbar-content {
+  display: flex;
+  gap: 20px;
+  padding: 10px;
+}
+
+.tool-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px;
+  border-right: 1px solid #eee;
+}
+
+.tool-group:last-child {
+  border-right: none;
+}
+
+.tool-btn {
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tool-btn.active {
+  background: #e0e0e0;
+  color: #2196F3;
+}
+
+.tool-btn .material-icons {
+  font-size: 20px;
+}
+
+#colorPicker {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+#brushSize {
+  width: 100px;
+}
+
+#brushSizeLabel {
+  min-width: 40px;
+  text-align: center;
+}
+
+.page-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+#pageInfo {
+  min-width: 80px;
+  text-align: center;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  background: #f5f5f5;
+  color: #333;
+}
+
+.action-btn:hover {
+  background: #e0e0e0;
+}
+
+.ai-btn {
+  background: #2196F3;
+  color: white;
+}
+
+.ai-btn:hover {
+  background: #1976D2;
+}
+
+.submit-btn {
+  background: #4CAF50;
+  color: white;
+}
+
+.submit-btn:hover {
+  background: #388E3C;
+}

static/js/history.js

@@ -0,0 +1,46 @@
+class History {
+  constructor(maxStates = 50) {
+    this.states = [];
+    this.currentIndex = -1;
+    this.maxStates = maxStates;
+  }
+
+  push(state) {
+    // Remove any states after current index
+    this.states = this.states.slice(0, this.currentIndex + 1);
+    
+    // Add new state
+    this.states.push(state);
+    
+    // Remove oldest state if exceeding maxStates
+    if (this.states.length > this.maxStates) {
+      this.states.shift();
+    }
+    
+    this.currentIndex = this.states.length - 1;
+  }
+
+  undo() {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+      return this.states[this.currentIndex];
+    }
+    return null;
+  }
+
+  redo() {
+    if (this.currentIndex < this.states.length - 1) {
+      this.currentIndex++;
+      return this.states[this.currentIndex];
+    }
+    return null;
+  }
+
+  canUndo() {
+    return this.currentIndex > 0;
+  }
+
+  canRedo() {
+    return this.currentIndex < this.states.length - 1;
+  }
+}

static/js/main.js

@@ -0,0 +1,96 @@
+class Whiteboard {
+  constructor() {
+    this.canvas = document.getElementById('whiteboard');
+    this.ctx = this.canvas.getContext('2d');
+    this.isDrawing = false;
+    this.setupCanvas();
+    this.setupEventListeners();
+  }
+
+  setupCanvas() {
+    const resize = () => {
+      this.canvas.width = window.innerWidth;
+      this.canvas.height = window.innerHeight;
+      
+      this.ctx.strokeStyle = '#000';
+      this.ctx.lineWidth = 2;
+      this.ctx.lineCap = 'round';
+      this.ctx.lineJoin = 'round';
+    };
+
+    window.addEventListener('resize', resize);
+    resize();
+  }
+
+  setupEventListeners() {
+    this.canvas.addEventListener('mousedown', this.startDrawing.bind(this));
+    this.canvas.addEventListener('mousemove', this.draw.bind(this));
+    this.canvas.addEventListener('mouseup', this.stopDrawing.bind(this));
+    this.canvas.addEventListener('mouseout', this.stopDrawing.bind(this));
+
+    this.canvas.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      const mouseEvent = new MouseEvent('mousedown', {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+      });
+      this.canvas.dispatchEvent(mouseEvent);
+    });
+
+    this.canvas.addEventListener('touchmove', (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      const mouseEvent = new MouseEvent('mousemove', {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+      });
+      this.canvas.dispatchEvent(mouseEvent);
+    });
+
+    this.canvas.addEventListener('touchend', (e) => {
+      e.preventDefault();
+      const mouseEvent = new MouseEvent('mouseup', {});
+      this.canvas.dispatchEvent(mouseEvent);
+    });
+
+    document.getElementById('processBtn').addEventListener('click', this.processDrawing.bind(this));
+    document.getElementById('clearBtn').addEventListener('click', this.clearCanvas.bind(this));
+  }
+
+  startDrawing(e) {
+    this.isDrawing = true;
+    const rect = this.canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    this.ctx.beginPath();
+    this.ctx.moveTo(x, y);
+  }
+
+  draw(e) {
+    if (!this.isDrawing) return;
+    const rect = this.canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    this.ctx.lineTo(x, y);
+    this.ctx.stroke();
+  }
+
+  stopDrawing() {
+    this.isDrawing = false;
+  }
+
+  clearCanvas() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  processDrawing() {
+    const imageData = this.canvas.toDataURL('image/png');
+    console.log('Processing drawing...');
+    console.log(imageData.substring(0, 100) + '...');
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  new Whiteboard();
+});

static/js/pages.js

@@ -0,0 +1,172 @@
+class Pages {
+  constructor() {
+    this.pages = [{}]; // Initially one empty page
+    this.currentPage = 0;
+    this.drawing = false; // Whether the user is currently drawing
+    this.lastX = 0;
+    this.lastY = 0;
+    this.ctx = null; // Canvas context
+    this.setupControls();
+    this.setupCanvas();
+    this.setupColorPicker();
+    this.setupBrushSize();
+  }
+
+  getAllPages() {
+    return this.pages; // Simply return all pages in the array
+  }
+
+  setPageContent(states) {
+    const currentPageData = this.pages[this.currentPage];
+    if (states.length > 0) {
+      currentPageData.drawing = states[states.length - 1].imageData;  // Store only the latest state
+    }
+  }
+
+  setupControls() {
+    const prevBtn = document.getElementById('prevBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    const pageInfo = document.getElementById('pageInfo');
+
+    prevBtn.addEventListener('click', () => this.previousPage());
+    nextBtn.addEventListener('click', () => this.nextPage());
+
+    this.updatePageInfo();
+  }
+
+  setupCanvas() {
+    const canvas = document.getElementById('whiteboard');
+    this.ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth - 40;
+    canvas.height = window.innerHeight - 100;
+    this.clearCanvas();
+
+    // Event listeners for drawing
+    canvas.addEventListener('mousedown', (e) => this.startDrawing(e));
+    canvas.addEventListener('mousemove', (e) => this.draw(e));
+    canvas.addEventListener('mouseup', () => this.stopDrawing());
+    canvas.addEventListener('mouseout', () => this.stopDrawing());
+  }
+
+  getPageContent() {
+    return this.pages[this.currentPage].drawing;  // Return the latest drawing state (imageData)
+  }
+
+  startDrawing(e) {
+    this.drawing = true;
+    const mousePos = getMousePos(this.ctx.canvas, e);
+    this.lastX = mousePos.x;
+    this.lastY = mousePos.y;
+  }
+
+  draw(e) {
+    if (!this.drawing) return;
+    const mousePos = getMousePos(this.ctx.canvas, e);
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.lastX, this.lastY);
+    this.ctx.lineTo(mousePos.x, mousePos.y);
+    this.ctx.strokeStyle = this.pages[this.currentPage].color || '#000000'; // Default black if no color set
+    this.ctx.lineWidth = this.pages[this.currentPage].brushSize || 2; // Default brush size
+    this.ctx.stroke();
+    this.lastX = mousePos.x;
+    this.lastY = mousePos.y;
+  }
+
+  stopDrawing() {
+    this.drawing = false;
+  }
+
+  setupColorPicker() {
+    const colorPicker = document.getElementById('colorPicker');
+    colorPicker.addEventListener('input', (event) => {
+      this.pages[this.currentPage].color = event.target.value; // Store color for current page
+    });
+  }
+
+  setupBrushSize() {
+    const brushSizeInput = document.getElementById('brushSize');
+    brushSizeInput.addEventListener('input', (event) => {
+      this.pages[this.currentPage].brushSize = event.target.value; // Store brush size for current page
+    });
+  }
+
+  getCurrentPage() {
+    return this.currentPage;
+  }
+
+  getPageCount() {
+    return this.pages.length;
+  }
+
+  addPage() {
+    this.pages.push({}); // Add a new empty page
+    this.currentPage = this.pages.length - 1;
+    this.clearCanvas(); // Clear the canvas for the new page
+    this.updatePageInfo();
+  }
+
+  previousPage() {
+    if (this.currentPage > 0) {
+      this.pages[this.currentPage].drawing = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); // Save current page's content
+  
+      this.currentPage--;
+      this.loadPageData(); // Load the content of the previous page
+      this.updatePageInfo();
+    }
+  }
+  
+  nextPage() {
+    if (this.pages[this.currentPage]) {
+      // Save content of current page to its storage
+      this.pages[this.currentPage].drawing = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    }
+  
+    // Add new page and clear canvas
+    if (this.pages[this.currentPage].drawing !== null) {
+      // Add new page only if current page is not empty
+      this.pages.push({ drawing: null });
+      this.currentPage++;
+    }
+    
+    this.clearCanvas(); // Clear the canvas for the new page
+    this.loadPageData(); // Load the newly added page's data
+    this.updatePageInfo();
+  }
+
+  updatePageInfo() {
+    const pageInfo = document.getElementById('pageInfo');
+    pageInfo.textContent = `Page ${this.currentPage + 1}`;
+  }
+
+  clearCanvas() {
+    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+  }
+
+  loadPageData() {
+    const pageData = this.pages[this.currentPage];
+    
+    // If there is saved content for this page, restore it
+    if (pageData.drawing) {
+      this.ctx.putImageData(pageData.drawing, 0, 0);
+    } else {
+      this.clearCanvas(); // If no content, clear canvas (empty page)
+    }
+    
+    // You can add any additional settings here (color picker, brush size, etc.)
+    if (pageData.color) {
+      document.getElementById('colorPicker').value = pageData.color;
+    }
+    if (pageData.brushSize) {
+      document.getElementById('brushSize').value = pageData.brushSize;
+    }
+  }
+}
+
+function getMousePos(canvas, evt) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: evt.clientX - rect.left,
+    y: evt.clientY - rect.top,
+  };
+
+}

static/js/script.js

@@ -0,0 +1,264 @@
+class Whiteboard {
+  constructor() {
+    this.canvas = document.getElementById('whiteboard');
+    this.ctx = this.canvas.getContext('2d');
+    this.isDrawing = false;
+    
+    this.history = new History();
+    this.tools = new DrawingTools(this.canvas, this.ctx);
+    this.pages = new Pages();
+    
+    this.setupCanvas();
+    this.setupEventListeners();
+    this.setupBrushPreview();
+    this.setupToolbarToggle();
+  }
+
+  setupCanvas() {
+    const resize = () => {
+      this.canvas.width = window.innerWidth;
+      this.canvas.height = window.innerHeight;
+      this.setupDrawingStyle();
+      
+      // Restore the current page
+      const pageContent = this.pages.getPageContent();
+      if (pageContent) {
+        this.ctx.putImageData(pageContent, 0, 0); // Use the drawing content from the current page
+      }
+    };
+  
+    window.addEventListener('resize', resize);
+    resize();
+  }
+
+  setupToolbarToggle() {
+    const toolbar = document.querySelector('.bottom-toolbar');
+    const toggleBtn = document.getElementById('toggleToolbar');
+    
+    toggleBtn.addEventListener('click', () => {
+      toolbar.classList.toggle('hidden');
+    });
+  }
+
+  setupBrushPreview() {
+    this.brushPreview = document.getElementById('brushPreview');
+    
+    this.canvas.addEventListener('mousemove', (e) => {
+      const { x, y } = getMousePos(this.canvas, e);
+      this.updateBrushPreview(x, y);
+    });
+
+    this.canvas.addEventListener('mouseenter', () => {
+      this.brushPreview.style.display = 'block';
+    });
+
+    this.canvas.addEventListener('mouseleave', () => {
+      this.brushPreview.style.display = 'none';
+    });
+  }
+
+  updateBrushPreview(x, y) {
+    const size = this.tools.brushSize;
+    this.brushPreview.style.width = size + 'px';
+    this.brushPreview.style.height = size + 'px';
+    this.brushPreview.style.left = (x - size/2) + 'px';
+    this.brushPreview.style.top = (y - size/2) + 'px';
+    this.brushPreview.style.borderColor = this.tools.isEraser ? '#000' : this.tools.color;
+  }
+
+  setupDrawingStyle() {
+    this.ctx.lineCap = 'round';
+    this.ctx.lineJoin = 'round';
+    this.ctx.font = '24px Arial';
+    this.tools.applyToolSettings();
+  }
+
+  setupEventListeners() {
+    // Mouse events
+    this.canvas.addEventListener('mousedown', this.startDrawing.bind(this));
+    this.canvas.addEventListener('mousemove', this.draw.bind(this));
+    this.canvas.addEventListener('mouseup', this.stopDrawing.bind(this));
+    this.canvas.addEventListener('mouseout', this.stopDrawing.bind(this));
+
+    // Touch events
+    this.canvas.addEventListener('touchstart', this.handleTouch.bind(this));
+    this.canvas.addEventListener('touchmove', this.handleTouch.bind(this));
+    this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
+
+    // Button events
+    document.getElementById('aiBtn').addEventListener('click', this.processDrawing.bind(this));
+    document.getElementById('submitBtn').addEventListener('click', this.generatePDF.bind(this));
+    document.getElementById('clearBtn').addEventListener('click', this.clearCanvas.bind(this));
+    document.getElementById('undoBtn').addEventListener('click', this.undo.bind(this));
+    document.getElementById('redoBtn').addEventListener('click', this.redo.bind(this));
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === 'z') {
+          e.preventDefault();
+          this.undo();
+        } else if (e.key === 'y') {
+          e.preventDefault();
+          this.redo();
+        }
+      }
+    });
+  }
+
+  handleTouch(e) {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const eventType = e.type === 'touchstart' ? 'mousedown' : 'mousemove';
+    const mouseEvent = new MouseEvent(eventType, {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    this.canvas.dispatchEvent(mouseEvent);
+  }
+
+  handleTouchEnd(e) {
+    e.preventDefault();
+    const mouseEvent = new MouseEvent('mouseup', {});
+    this.canvas.dispatchEvent(mouseEvent);
+  }
+
+  startDrawing(e) {
+    this.isDrawing = true;
+    const { x, y } = getMousePos(this.canvas, e);
+    this.tools.applyToolSettings();
+    this.ctx.beginPath();
+    this.ctx.moveTo(x, y);
+  }
+
+  draw(e) {
+    if (!this.isDrawing) return;
+    const { x, y } = getMousePos(this.canvas, e);
+    this.ctx.lineTo(x, y);
+    this.ctx.stroke();
+  }
+
+  stopDrawing() {
+    if (this.isDrawing) {
+      this.isDrawing = false;
+      this.saveState();
+    }
+  }
+
+  saveState() {
+    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    this.history.push(new DrawingState(imageData));
+    this.pages.setPageContent(this.history.states);
+  }
+
+  undo() {
+    const state = this.history.undo();
+    if (state) {
+      this.ctx.putImageData(state.imageData, 0, 0);
+      this.pages.setPageContent(this.history.states);
+    }
+  }
+
+  redo() {
+    const state = this.history.redo();
+    if (state) {
+      this.ctx.putImageData(state.imageData, 0, 0);
+      this.pages.setPageContent(this.history.states);
+    }
+  }
+
+  clearCanvas() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.saveState();
+  }
+
+  processDrawing() {
+    const tempCanvas = document.createElement('canvas');
+    const tempContext = tempCanvas.getContext('2d');
+    tempCanvas.width = this.canvas.width;
+    tempCanvas.height = this.canvas.height;
+    tempContext.fillStyle = 'white';
+    tempContext.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+    tempContext.drawImage(this.canvas, 0, 0);
+    const imageData = tempCanvas.toDataURL('image/png');
+    console.log('Processing drawing with AI...');
+    console.log(imageData.substring(0, 100) + '...');
+    fetch('/whitebai', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            image: imageData
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('result').innerText = data.message;
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+  }
+
+  async generatePDF() {
+    const pages = this.pages.getAllPages();
+
+    for (let i = 0; i < pages.length; i++) {
+        const pageContent = pages[i];
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = this.canvas.width;
+        tempCanvas.height = this.canvas.height;
+        const tempCtx = tempCanvas.getContext('2d');
+        tempCtx.fillStyle = 'white';
+        tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+
+        if (pageContent && pageContent.drawing) {
+            const imageData = pageContent.drawing;
+
+            if (imageData) {
+                try {
+                    tempCtx.putImageData(imageData, 0, 0);
+                    console.log("Image applied to canvas for page " + i);
+                } catch (error) {
+                    console.log("Error putting image data on page " + i, error);
+                }
+            } else {
+                console.log("No image data for page " + i);
+            }
+        }
+
+        const imgData = tempCanvas.toDataURL('image/png');
+        console.log(`Base64 data for page ${i}:`, imgData);
+    }
+}
+
+  writeText(text, x = 20, y = 40) {
+    this.setupDrawingStyle();
+    this.ctx.fillStyle = this.tools.color;
+    this.ctx.fillText(text.toString(), x, y);
+    this.saveState();
+  }
+}
+
+const whiteboard = new Whiteboard();
+const canvas = document.getElementById('whiteboard');
+
+document.addEventListener('keydown', function(event) {
+  if (event.ctrlKey && event.key === 's') {
+      event.preventDefault();
+      const tempCanvas = document.createElement('canvas');
+      const tempContext = tempCanvas.getContext('2d');
+      tempCanvas.width = canvas.width;
+      tempCanvas.height = canvas.height;
+      tempContext.fillStyle = 'white';
+      tempContext.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+      tempContext.drawImage(canvas, 0, 0);
+      const imageData = tempCanvas.toDataURL("image/png");
+      const link = document.createElement('a');
+      link.href = imageData;
+      link.download = 'canvas-image.png';
+      link.click();
+      console.log("Canvas saved as image with white background!");
+  }
+});

static/js/tools.js

@@ -0,0 +1,44 @@
+class DrawingTools {
+  constructor(canvas, ctx) {
+    this.canvas = canvas;
+    this.ctx = ctx;
+    this.color = '#000000';
+    this.brushSize = 2;
+    this.isEraser = false;
+    this.setupTools();
+  }
+
+  setupTools() {
+    const colorPicker = document.getElementById('colorPicker');
+    const brushSize = document.getElementById('brushSize');
+    const brushSizeLabel = document.getElementById('brushSizeLabel');
+    const eraserBtn = document.getElementById('eraserBtn');
+
+    colorPicker.addEventListener('input', (e) => {
+      this.color = e.target.value;
+      this.isEraser = false;
+      eraserBtn.classList.remove('active');
+    });
+
+    brushSize.addEventListener('input', (e) => {
+      this.brushSize = e.target.value;
+      brushSizeLabel.textContent = `${this.brushSize}px`;
+    });
+
+    eraserBtn.addEventListener('click', () => {
+      this.isEraser = !this.isEraser;
+      eraserBtn.classList.toggle('active');
+    });
+  }
+
+  applyToolSettings() {
+    if (this.isEraser) {
+      this.ctx.globalCompositeOperation = 'destination-out';
+      this.ctx.strokeStyle = 'rgba(0,0,0,1)';
+    } else {
+      this.ctx.globalCompositeOperation = 'source-over';
+      this.ctx.strokeStyle = this.color;
+    }
+    this.ctx.lineWidth = this.brushSize;
+  }
+}

static/js/utils.js

@@ -0,0 +1,21 @@
+class DrawingState {
+  constructor(imageData) {
+    this.imageData = imageData;
+  }
+}
+
+function getMousePos(canvas, evt) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: evt.clientX - rect.left,
+    y: evt.clientY - rect.top
+  };
+}
+
+function getTouchPos(canvas, evt) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: evt.touches[0].clientX - rect.left,
+    y: evt.touches[0].clientY - rect.top
+  };
+}

templates/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Whiteboard</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  </head>
+  <body>
+    <div class="whiteboard-container">
+      <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+        <canvas id="whiteboard"></canvas>
+      </div>
+      <div class="brush-preview" id="brushPreview"></div>
+      <div class="bottom-toolbar">
+        <button id="toggleToolbar" class="tool-btn toggle-btn" title="Toggle Toolbar">
+          <span class="material-icons">keyboard_arrow_up</span>
+        </button>
+        <div id="toolbarContent" class="toolbar-content">
+          <div class="tool-group">
+            <button id="undoBtn" class="tool-btn" title="Undo (Ctrl+Z)">
+              <span class="material-icons">undo</span>
+            </button>
+            <button id="redoBtn" class="tool-btn" title="Redo (Ctrl+Y)">
+              <span class="material-icons">redo</span>
+            </button>
+          </div>
+          <div class="tool-group">
+            <input type="color" id="colorPicker" value="#000000" title="Color">
+            <button id="eraserBtn" class="tool-btn" title="Eraser">
+              <span class="material-icons">auto_fix_high</span>
+            </button>
+          </div>
+          <div class="tool-group">
+            <input type="range" id="brushSize" min="1" max="50" value="2" title="Brush Size">
+            <span id="brushSizeLabel">2px</span>
+          </div>
+          <div class="page-controls">
+            <button id="prevBtn" class="tool-btn" title="Previous Page">
+              <span class="material-icons">navigate_before</span>
+            </button>
+            <span id="pageInfo">Page 1</span>
+            <button id="nextBtn" class="tool-btn" title="Next Page">
+              <span class="material-icons">navigate_next</span>
+            </button>
+          </div>
+          <div class="action-buttons">
+            <button id="clearBtn" class="tool-btn" title="Clear Page">
+              <span class="material-icons">delete_outline</span>
+            </button>
+            <button id="aiBtn" class="action-btn ai-btn">
+              <span class="material-icons">psychology</span>
+              AI
+            </button>
+            <button id="submitBtn" class="action-btn submit-btn">
+              <span class="material-icons">upload_file</span>
+              Submit
+            </button>
+            <p id="result">Testing</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/history.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/tools.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/pages.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+  </body>
+</html>