Initial commit for Hugging Face Space

Dockerfile

@@ -0,0 +1,23 @@
+# Use a lightweight Python base image
+FROM python:3.9-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install system dependencies required for the application
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential && \
+    rm -rf /var/lib/apt/lists/*
+
+# Copy the application files into the container
+COPY . /app
+
+# Install Python dependencies
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the application port
+EXPOSE 7860
+
+# Command to run the application using Gunicorn with Eventlet
+CMD ["gunicorn", "--worker-class", "eventlet", "-w", "1", "app:app", "-b", "0.0.0.0:7860"]

app.py

@@ -0,0 +1,113 @@
+from flask import Flask, render_template
+from flask_socketio import SocketIO
+from transformers import MultiBeamTextStreamer, AutoTokenizer, AutoModelForCausalLM
+import torch
+import time
+import eventlet
+
+eventlet.monkey_patch()
+app = Flask(__name__)
+socketio = SocketIO(app, ping_timeout=60)
+
+# Initialize model and tokenizer
+MODEL_NAME = "Qwen/Qwen2.5-0.5B-Instruct"
+tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+model = AutoModelForCausalLM.from_pretrained(
+    MODEL_NAME,
+    torch_dtype="auto",
+    device_map="auto"
+)
+
+
+class WebSocketBeamStreamer(MultiBeamTextStreamer):
+    """Custom streamer that sends updates through websockets with adjustable speed"""
+
+    def __init__(self, tokenizer, num_beams, sleep_time=0, skip_prompt=True):
+        super().__init__(
+            tokenizer,
+            num_beams=num_beams,
+            skip_prompt=skip_prompt,
+            on_beam_update=self.on_beam_update,
+            on_beam_finished=self.on_beam_finished
+        )
+        self.beam_texts = {i: "" for i in range(num_beams)}
+        self.sleep_time = sleep_time  # Sleep time in milliseconds
+
+    def on_beam_update(self, beam_idx: int, new_text: str):
+        """Send beam updates through websocket with delay"""
+        self.beam_texts[beam_idx] = new_text
+        if self.sleep_time > 0:
+            time.sleep(self.sleep_time / 1000)  # Convert milliseconds to seconds
+        socketio.emit('beam_update', {
+            'beam_idx': beam_idx,
+            'text': new_text
+        })
+
+    def on_beam_finished(self, final_text: str):
+        """Send completion notification through websocket"""
+        socketio.emit('beam_finished', {
+            'text': final_text
+        })
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@socketio.on('generate')
+def handle_generation(data):
+    # Emit a generation start event
+    socketio.emit('generation_started')
+
+    prompt = data['prompt']
+    num_beams = data.get('num_beams', 5)
+    max_new_tokens = data.get('max_tokens', 512)
+    sleep_time = data.get('sleep_time', 0)  # Get sleep time from frontend
+
+    # Create messages format
+    messages = [
+        {"role": "system", "content": "You are a helpful assistant."},
+        {"role": "user", "content": prompt}
+    ]
+
+    # Apply chat template
+    text = tokenizer.apply_chat_template(
+        messages,
+        tokenize=False,
+        add_generation_prompt=True
+    )
+
+    # Prepare inputs
+    model_inputs = tokenizer([text], return_tensors="pt").to(model.device)
+
+    # Initialize streamer with sleep time
+    streamer = WebSocketBeamStreamer(
+        tokenizer=tokenizer,
+        num_beams=num_beams,
+        sleep_time=sleep_time,
+        skip_prompt=True
+    )
+
+    try:
+        # Generate with beam search
+        with torch.no_grad():
+            model.generate(
+                **model_inputs,
+                num_beams=num_beams,
+                num_return_sequences=num_beams,
+                max_new_tokens=max_new_tokens,
+                output_scores=True,
+                return_dict_in_generate=True,
+                early_stopping=True,
+                streamer=streamer
+            )
+    except Exception as e:
+        socketio.emit('generation_error', {'error': str(e)})
+    finally:
+        # Emit generation completed event
+        socketio.emit('generation_completed')
+
+
+if __name__ == '__main__':
+    socketio.run(app, host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,7 @@
+torch
+eventlet
+Flask
+Flask-SocketIO
+accelerate
+gunicorn
+git+https://github.com/MosheOfer1/transformers.git

temp.py

@@ -0,0 +1,175 @@
+import argparse
+import os
+
+from transformers import MultiBeamTextStreamer, AutoTokenizer, AutoModelForCausalLM
+
+
+class BeamOutputManager:
+    """Manages file handlers for beam outputs"""
+
+    def __init__(self, output_dir: str, num_beams: int):
+        self.output_dir = output_dir
+        self.num_beams = num_beams
+        self.counter = 0
+
+        # Create main output directory and closed beams directory
+        os.makedirs(output_dir, exist_ok=True)
+        self.closed_beams_dir = os.path.join(output_dir, "closed_beams")
+        os.makedirs(self.closed_beams_dir, exist_ok=True)
+
+        # Store complete text for each beam
+        self.beam_texts = {i: "" for i in range(num_beams)}
+        self.active_beams = set(range(num_beams))
+
+        # Initialize empty files
+        for beam_idx in range(num_beams):
+            filename = os.path.join(output_dir, f'beam_{beam_idx}.txt')
+            with open(filename, 'w', encoding='utf-8') as f:
+                f.write('')
+
+    def write_to_beam(self, beam_idx: int, text: str):
+        """Write text to the specified beam's file"""
+        if 0 <= beam_idx < self.num_beams and beam_idx in self.active_beams:
+            # Update stored text
+            self.beam_texts[beam_idx] = text
+
+            # Write complete text to file
+            filename = os.path.join(self.output_dir, f'beam_{beam_idx}.txt')
+            with open(filename, 'w', encoding='utf-8') as f:
+                f.write(self.beam_texts[beam_idx])
+
+    def finalize_beam(self, final_text: str):
+        """
+        Handle a completed beam by creating a new file in the closed_beams directory.
+
+        Args:
+            final_text (str): The complete text generated by the finished beam
+        """
+        # Create a timestamp-based filename to ensure uniqueness
+        self.counter += 1
+        filename = os.path.join(self.closed_beams_dir, f'completed_beam_{self.counter}.txt')
+
+        # Write the final text to the completed beam file
+        with open(filename, 'w', encoding='utf-8') as f:
+            f.write(final_text)
+
+        return filename
+
+
+def setup_model_and_tokenizer(model_name):
+    """
+    Initialize the model and tokenizer.
+
+    Args:
+        model_name (str): Name of the model to use
+
+    Returns:
+        tuple: (model, tokenizer)
+    """
+    tokenizer = AutoTokenizer.from_pretrained(model_name)
+    model = AutoModelForCausalLM.from_pretrained(
+        model_name,
+        torch_dtype="auto",
+        device_map="auto"
+    )
+    return model, tokenizer
+
+
+def generate_with_beam_search(model, tokenizer, user_prompt, output_dir, num_beams=5, max_new_tokens=512):
+    """
+    Generate responses using beam search and write results to files.
+
+    Args:
+        model: The language model
+        tokenizer: The tokenizer
+        user_prompt (str): Input prompt
+        output_dir (str): Directory to save beam outputs
+        num_beams (int): Number of beams to use
+        max_new_tokens (int): Maximum number of new tokens to generate
+    """
+    # Initialize the output manager
+    output_manager = BeamOutputManager(output_dir, num_beams)
+
+    def on_beam_update(beam_idx: int, new_text: str):
+        """Handler for beam updates - write new text to file"""
+        output_manager.write_to_beam(beam_idx, new_text)
+
+    def on_beam_finished(final_text: str):
+        """Handler for completed beams - create final output file"""
+        final_path = output_manager.finalize_beam(final_text)
+        print(f"\nCompleted beam saved to: {final_path}")
+
+    # Create messages format
+    messages = [
+        {"role": "system", "content": "You are a helpful assistant."},
+        {"role": "user", "content": user_prompt}
+    ]
+
+    # Apply chat template
+    text = tokenizer.apply_chat_template(
+        messages,
+        tokenize=False,
+        add_generation_prompt=True
+    )
+
+    # Prepare inputs
+    model_inputs = tokenizer([text], return_tensors="pt").to(model.device)
+
+    # Initialize streamer with handlers
+    streamer = MultiBeamTextStreamer(
+        tokenizer=tokenizer,
+        num_beams=num_beams,
+        on_beam_update=on_beam_update,
+        on_beam_finished=on_beam_finished,
+        skip_prompt=True
+    )
+
+    # Generate with beam search
+    model.generate(
+        **model_inputs,
+        num_beams=num_beams,
+        num_return_sequences=num_beams,
+        max_new_tokens=max_new_tokens,
+        output_scores=True,
+        return_dict_in_generate=True,
+        early_stopping=True,
+        streamer=streamer
+    )
+
+
+def main():
+    # Setup command line arguments
+    parser = argparse.ArgumentParser(description='Language Model Text Generation with Beam Search')
+    parser.add_argument('--model', type=str, default='Qwen/Qwen2.5-0.5B-Instruct',
+                        help='Name of the model to use')
+    parser.add_argument('--num_beams', type=int, default=5,
+                        help='Number of beams for beam search')
+    parser.add_argument('--max_tokens', type=int, default=512,
+                        help='Maximum number of new tokens to generate')
+    parser.add_argument('--output_dir', type=str, default='beam_outputs',
+                        help='Directory to save beam outputs')
+
+    args = parser.parse_args()
+
+    # Initialize model and tokenizer
+    model, tokenizer = setup_model_and_tokenizer(args.model)
+
+    # Interactive loop
+    while True:
+        prompt = input("\nEnter your prompt (or 'quit' to exit): ")
+        if prompt.lower() == 'quit':
+            break
+
+        generate_with_beam_search(
+            model,
+            tokenizer,
+            prompt,
+            args.output_dir,
+            num_beams=args.num_beams,
+            max_new_tokens=args.max_tokens
+        )
+        print(f"\nOutputs written to: {args.output_dir}/beam_*.txt")
+
+
+if __name__ == "__main__":
+    main()

templates/index.html

@@ -0,0 +1,530 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Beam Search Generation</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #4F46E5;
+            --secondary-color: #818CF8;
+            --background-color: #F3F4F6;
+            --card-background: #FFFFFF;
+            --text-primary: #111827;
+            --text-secondary: #4B5563;
+            --accent-color: #3730A3;
+            --success-color: #059669;
+            --border-radius: 12px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+        }
+
+        body {
+            background-color: var(--background-color);
+            color: var(--text-primary);
+            line-height: 1.5;
+            min-height: 100vh;
+        }
+
+        .header {
+            background: var(--card-background);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 1rem;
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--accent-color);
+            text-align: center;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+            padding: 1.5rem;
+            margin: 0;
+        }
+
+        .input-section {
+            background: var(--card-background);
+            padding: 1.5rem 2rem;
+            border-bottom: 1px solid #E5E7EB;
+        }
+
+        textarea {
+            width: 100%;
+            padding: 1rem;
+            border: 2px solid #E5E7EB;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+            resize: vertical;
+            margin-bottom: 1rem;
+        }
+
+        textarea:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+        }
+
+        .controls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+        }
+
+        label {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--text-secondary);
+        }
+
+        input[type="number"] {
+            padding: 0.75rem;
+            border: 2px solid #E5E7EB;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        input[type="number"]:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+        }
+
+        .slider-container {
+            margin: 1rem 0;
+            padding: 1rem;
+            background: var(--background-color);
+            border-radius: var(--border-radius);
+        }
+
+        .slider-group {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-top: 0.5rem;
+        }
+
+        input[type="range"] {
+            flex: 1;
+            height: 8px;
+            -webkit-appearance: none;
+            background: #E5E7EB;
+            border-radius: 4px;
+            outline: none;
+            transition: all 0.3s ease;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            background: var(--primary-color);
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        input[type="range"]::-webkit-slider-thumb:hover {
+            background: var(--accent-color);
+            transform: scale(1.1);
+        }
+
+        .slider-value {
+            min-width: 100px;
+            padding: 0.5rem 1rem;
+            background: var(--primary-color);
+            color: white;
+            border-radius: var(--border-radius);
+            text-align: center;
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+
+        #generate-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: var(--border-radius);
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            width: 100%;
+            margin-top: 1rem;
+        }
+
+        #generate-btn:hover {
+            background-color: var(--accent-color);
+            transform: translateY(-1px);
+        }
+
+        #generate-btn:disabled {
+            background-color: #D1D5DB;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .loading {
+            display: none;
+            text-align: center;
+            color: var(--text-secondary);
+            font-weight: 600;
+            padding: 0.5rem;
+        }
+
+        .container {
+            padding: 0 2rem;
+        }
+
+        .split-container {
+            display: flex;
+            gap: 2rem;
+            padding-bottom: 2rem;
+        }
+
+        .left-panel, .right-panel {
+            flex: 1;
+            background: var(--card-background);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            min-height: 300px;
+        }
+
+        .panel-title {
+            font-size: 1.25rem;
+            color: var(--accent-color);
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid var(--secondary-color);
+        }
+
+        .beam-container {
+            background: var(--background-color);
+            margin-bottom: 1rem;
+            padding: 1.5rem;
+            border-radius: var(--border-radius);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s ease;
+        }
+
+        .beam-container:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .beam-container h3, .beam-container h4 {
+            color: var(--accent-color);
+            margin-bottom: 1rem;
+            font-weight: 600;
+        }
+
+        .beam-text {
+            white-space: pre-wrap;
+            font-family: 'Cascadia Code', 'Source Code Pro', monospace;
+            line-height: 1.6;
+            color: var(--text-secondary);
+            background: var(--card-background);
+            padding: 1rem;
+            border-radius: calc(var(--border-radius) - 4px);
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 0 1rem;
+            }
+
+            .split-container {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .controls {
+                grid-template-columns: 1fr;
+            }
+
+            .header {
+                margin-bottom: 1rem;
+            }
+        }
+        .footer {
+            background: var(--card-background);
+            padding: 2rem;
+            margin-top: 2rem;
+            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 2rem;
+        }
+
+        .project-info h3 {
+            color: var(--accent-color);
+            margin-bottom: 1rem;
+            font-size: 1.25rem;
+        }
+
+        .project-info p {
+            color: var(--text-secondary);
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
+
+        .credit {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            justify-content: center;
+        }
+
+        .credit p {
+            color: var(--text-secondary);
+            margin-bottom: 1rem;
+        }
+
+        .credit a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 600;
+            transition: color 0.3s ease;
+        }
+
+        .credit a:hover {
+            color: var(--accent-color);
+        }
+
+        .social-links {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .social-links a {
+            color: var(--text-secondary);
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .social-links a:hover {
+            color: var(--primary-color);
+            transform: translateY(-2px);
+        }
+
+        @media (max-width: 768px) {
+            .footer-content {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+
+            .credit {
+                align-items: flex-start;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Beam Search Generator</h1>
+
+        <div class="input-section">
+            <textarea id="prompt" rows="4" placeholder="Enter your prompt here..."></textarea>
+
+            <div class="controls">
+                <div class="input-group">
+                    <label for="num_beams">Number of beams</label>
+                    <input type="number" id="num_beams" value="5" min="2" max="10">
+                </div>
+
+                <div class="input-group">
+                    <label for="max_tokens">Max tokens</label>
+                    <input type="number" id="max_tokens" value="512" min="1">
+                </div>
+            </div>
+
+            <div class="slider-container">
+                <label for="sleep_time">Generation Speed</label>
+                <div class="slider-group">
+                    <i class="fas fa-bolt" title="Fast"></i>
+                    <input type="range" id="sleep_time" min="0" max="500" value="0" step="10">
+                    <i class="fas fa-hourglass" title="Slow"></i>
+                    <div class="slider-value" id="sleep_value">0ms delay</div>
+                </div>
+            </div>
+
+            <button id="generate-btn" onclick="generate()">
+                <i class="fas fa-wand-magic-sparkles"></i>
+                Generate
+            </button>
+
+            <div id="loading" class="loading">
+                <i class="fas fa-spinner"></i>
+                Generating amazing content...
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="split-container">
+            <div class="left-panel">
+                <h2 class="panel-title">Active Beams</h2>
+                <div id="beams"></div>
+            </div>
+
+            <div class="right-panel">
+                <h2 class="panel-title">Completed Beams</h2>
+                <div id="completed-list"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let socket = io();
+        let beams = {};
+        let completedBeams = [];
+        let isGenerating = false;
+
+        // Add slider value update
+        const sleepSlider = document.getElementById('sleep_time');
+        const sleepValue = document.getElementById('sleep_value');
+
+        sleepSlider.addEventListener('input', function() {
+            const value = parseInt(this.value);
+            sleepValue.textContent = value === 0 ? 'No delay' : `${value}ms delay`;
+        });
+
+        function setupSocketListeners() {
+            socket.on('beam_update', function(data) {
+                const { beam_idx, text } = data;
+                if (!beams[beam_idx]) {
+                    createBeamContainer(beam_idx);
+                }
+                document.getElementById(`beam-${beam_idx}`).textContent = text;
+            });
+
+            socket.on('beam_finished', function(data) {
+                completedBeams.push(data.text);
+                updateCompletedBeams();
+            });
+
+            socket.on('generation_started', function() {
+                isGenerating = true;
+                document.getElementById('generate-btn').disabled = true;
+                document.getElementById('loading').style.display = 'block';
+                document.getElementById('generate-btn').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+            });
+
+            socket.on('generation_completed', function() {
+                isGenerating = false;
+                document.getElementById('generate-btn').disabled = false;
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('generate-btn').innerHTML = '<i class="fas fa-wand-magic-sparkles"></i> Generate';
+            });
+
+            socket.on('generation_error', function(data) {
+                alert('Error during generation: ' + data.error);
+                isGenerating = false;
+                document.getElementById('generate-btn').disabled = false;
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('generate-btn').innerHTML = '<i class="fas fa-wand-magic-sparkles"></i> Generate';
+            });
+
+            socket.on('connect_error', function(error) {
+                console.error('Connection error:', error);
+                resetConnection();
+            });
+        }
+
+        function createBeamContainer(beamIdx) {
+            const container = document.createElement('div');
+            container.className = 'beam-container';
+            container.innerHTML = `
+                <h3>Beam ${beamIdx + 1}</h3>
+                <div id="beam-${beamIdx}" class="beam-text"></div>
+            `;
+            document.getElementById('beams').appendChild(container);
+            beams[beamIdx] = container;
+        }
+
+        function updateCompletedBeams() {
+            const completedList = document.getElementById('completed-list');
+            completedList.innerHTML = completedBeams.map((text, idx) => `
+                <div class="beam-container">
+                    <h4>Completed Beam ${idx + 1}</h4>
+                    <div class="beam-text">${text}</div>
+                </div>
+            `).join('');
+        }
+
+        function resetConnection() {
+            if (socket) {
+                socket.disconnect();
+            }
+            socket = io();
+            setupSocketListeners();
+        }
+
+        function generate() {
+            if (isGenerating) return;
+
+            document.getElementById('beams').innerHTML = '';
+            document.getElementById('completed-list').innerHTML = '';
+            beams = {};
+            completedBeams = [];
+
+            resetConnection();
+
+            const prompt = document.getElementById('prompt').value;
+            const numBeams = parseInt(document.getElementById('num_beams').value);
+            const maxTokens = parseInt(document.getElementById('max_tokens').value);
+            const sleepTime = parseInt(document.getElementById('sleep_time').value);
+
+            socket.emit('generate', {
+                prompt: prompt,
+                num_beams: numBeams,
+                max_tokens: maxTokens,
+                sleep_time: sleepTime
+            });
+        }
+
+        setupSocketListeners();
+    </script>
+<footer class="footer">
+        <div class="footer-content">
+            <div class="project-info">
+                <h3>About This Project</h3>
+                <p>This website demonstrates the MultiBeamTextStreamer feature proposed in a pull request to the Hugging Face Transformers library. The MultiBeamTextStreamer enables real-time visualization of beam search generation, providing insights into how language models explore different text completion possibilities.</p>
+                <p>The implementation showcases how beam search works by displaying multiple candidate sequences simultaneously, making it a valuable educational tool for understanding text generation algorithms.</p>
+            </div>
+            <div class="credit">
+                <p>Created by <a href="https://github.com/mosheofer1" target="_blank" rel="noopener noreferrer">Moshe Ofer</a></p>
+                <div class="social-links">
+                    <a href="https://github.com/mosheofer1" target="_blank" rel="noopener noreferrer" title="GitHub">
+                        <i class="fab fa-github"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/in/moshe-ofer/" target="_blank" rel="noopener noreferrer" title="linkedin">
+                        <i class="fas fa-rocket"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>