Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>LLaMA 3.2 3B + QLoRA — Python code generation</title> | |
| <style> | |
| :root { --bg:#0f0f11; --panel:#18181b; --border:#2a2a2f; --fg:#e4e4e7; --mut:#a1a1aa; --acc:#4ade80; --warn:#fbbf24; } | |
| * { box-sizing:border-box; } | |
| body { margin:0; padding:2rem 1.5rem; background:var(--bg); color:var(--fg); | |
| font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; line-height:1.6; } | |
| .wrap { max-width:1100px; margin:0 auto; } | |
| h1 { font-size:1.5rem; font-weight:600; margin:0 0 .5rem; } | |
| .sub { color:var(--mut); margin:0 0 1.5rem; } | |
| .stat { display:inline-block; background:var(--panel); border:1px solid var(--border); | |
| border-radius:8px; padding:.6rem 1rem; margin:0 .5rem .5rem 0; font-size:.9rem; } | |
| .stat b { color:var(--acc); } | |
| select { width:100%; padding:.7rem; background:var(--panel); color:var(--fg); | |
| border:1px solid var(--border); border-radius:8px; font-size:1rem; margin:1rem 0; } | |
| .cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } | |
| @media(max-width:820px){ .cols{ grid-template-columns:1fr; } } | |
| .col h3 { font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; | |
| color:var(--mut); margin:0 0 .5rem; } | |
| .col h3 .tag { font-size:.7rem; padding:.15rem .4rem; border-radius:4px; margin-left:.4rem; | |
| text-transform:none; letter-spacing:0; } | |
| .bad { background:#3f1d1d; color:#fca5a5; } | |
| .good { background:#14532d; color:#86efac; } | |
| pre { background:var(--panel); border:1px solid var(--border); border-radius:8px; | |
| padding:1rem; overflow-x:auto; font-size:.82rem; line-height:1.5; | |
| font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin:0; white-space:pre; } | |
| .note { color:var(--mut); font-size:.85rem; margin-top:1.5rem; padding-top:1.5rem; | |
| border-top:1px solid var(--border); } | |
| a { color:var(--acc); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <h1>Python code generation — LLaMA 3.2 3B + QLoRA</h1> | |
| <p class="sub">A 9.2M-parameter LoRA adapter (0.285% of the model), trained in 1.88 hours on a free T4.</p> | |
| <div> | |
| <span class="stat">HumanEval pass@1 <b>40.5% → 54.1%</b></span> | |
| <span class="stat">Valid Python <b>57.5% → 100%</b></span> | |
| <span class="stat">Peak VRAM <b>4.17 GB</b></span> | |
| </div> | |
| <p class="sub">The base model writes correct code — it just writes it in JavaScript | |
| about 40% of the time, wrapped in markdown fences. Pick a prompt:</p> | |
| <select id="sel"></select> | |
| <div class="cols"> | |
| <div class="col"> | |
| <h3>Base LLaMA 3.2 3B <span class="tag bad" id="btag"></span></h3> | |
| <pre id="base"></pre> | |
| </div> | |
| <div class="col"> | |
| <h3>Fine-tuned <span class="tag good">this adapter</span></h3> | |
| <pre id="ft"></pre> | |
| </div> | |
| </div> | |
| <p class="note"> | |
| Outputs are pre-generated with greedy decoding, so they are deterministic and reproducible. | |
| Free HuggingFace Spaces have no GPU; running a 3B model live would take roughly 60 seconds | |
| per generation.<br><br> | |
| Model and full evaluation: | |
| <a href="https://huggingface.co/Raghul09/llama-code-gen-lora">Raghul09/llama-code-gen-lora</a> | |
| </p> | |
| </div> | |
| <script> | |
| const DATA = [{"instruction": "Write a function to reverse a string", "base": "```js\nfunction reverseString(str) {\n let reversed = '';\n for (let i = str.length - 1; i >= 0; i--) {\n reversed += str[i];\n }\n return reversed;\n}\n```", "ft": "def reverse_string(string):\n return string[::-1]"}, {"instruction": "Implement binary search on a sorted list", "base": "```java\npublic class Solution {\n public int search(int[] nums, int target) {\n int left = 0, right = nums.length - 1;\n while (left <= right) {\n int mid = left + (right - left) / 2;\n if (nums[mid] == target) {\n return mid;\n } else if (nums[mid] > target) {\n right = mid - 1;\n } else {\n left = mid + 1;\n }\n }\n return -1;\n }\n}\n```", "ft": "def binary_search(arr, target):\n low = 0\n high = len(arr) - 1\n\n while low <= high:\n mid = (low + high) // 2\n if arr[mid] == target:\n return mid\n elif arr[mid] < target:\n low = mid + 1\n else:\n high = mid - 1\n return -1"}, {"instruction": "Create a function that flattens a nested list", "base": "```js\nfunction flatten(list) {\n return list.reduce((acc, item) => {\n if (Array.isArray(item)) {\n return acc.concat(flatten(item));\n }\n return acc.concat(item);\n }, []);\n}\n```", "ft": "def flatten_list(nested_list):\n flat_list = []\n for item in nested_list:\n if isinstance(item, list):\n flat_list.extend(flatten_list(item))\n else:\n flat_list.append(item)\n return flat_list"}, {"instruction": "Write a function to count word frequency in a string", "base": "```python\ndef word_frequency(string):\n word_count = {}\n for word in string.split():\n if word in word_count:\n word_count[word] += 1\n else:\n word_count[word] = 1\n return word_count\n```", "ft": "def count_words(string):\n words = string.split()\n word_freq = {}\n for word in words:\n if word in word_freq:\n word_freq[word] += 1\n else:\n word_freq[word] = 1\n return word_freq"}, {"instruction": "Write a decorator that measures execution time", "base": "```python\ndef timeit(func):\n def wrapper(*args, **kwargs):\n start = time.time()\n result = func(*args, **kwargs)\n end = time.time()\n print(f\"Function {func.__name__} took {end - start} seconds to execute\")\n return result\n return wrapper\n```", "ft": "import time\n\ndef timeit(func):\n def wrapper(*args, **kwargs):\n start = time.time()\n result = func(*args, **kwargs)\n end = time.time()\n print(\"Execution time: {} seconds\".format(end-start))\n return result\n return wrapper"}, {"instruction": "Write a function to check if two strings are anagrams", "base": "```python\ndef is_anagram(s1, s2):\n if len(s1) != len(s2):\n return False\n s1 = sorted(s1)\n s2 = sorted(s2)\n return s1 == s2\n```", "ft": "def is_anagram(str1, str2):\n if len(str1) != len(str2):\n return False\n else:\n str1 = sorted(str1)\n str2 = sorted(str2)\n if str1 == str2:\n return True\n else:\n return False"}, {"instruction": "Implement a stack class with push, pop, and peek", "base": "```java\npublic class Stack {\n private int[] stack;\n private int top;\n private int size;\n\n public Stack(int size) {\n this.stack = new int[size];\n this.top = -1;\n this.size = size;\n }\n\n public void push(int value) {\n if (top == size - 1) {\n System.out.println(\"Stack is full\");\n return;\n }\n top++;\n stack[top] = value;\n }\n\n public int pop() {\n if (top == -1) {\n System.out.println(\"Stack is empty\");\n return -1;\n }\n int value = stack[top];\n top--;\n return value;\n }\n\n public int peek() {\n if (top == -1) {\n System.out.println(\"Stack is empty\");\n return -1;\n }\n return stack[top];\n }\n}\n```", "ft": "class Stack:\n def __init__(self):\n self.stack = []\n\n def push(self, item):\n self.stack.append(item)\n\n def pop(self):\n return self.stack.pop()\n\n def peek(self):\n return self.stack[-1]"}, {"instruction": "Write a function that returns the nth Fibonacci number", "base": "```python\ndef fib(n):\n if n == 0:\n return 0\n if n == 1:\n return 1\n return fib(n-1) + fib(n-2)\n```", "ft": "def fibonacci(n):\n if n == 0:\n return 0\n elif n == 1:\n return 1\n else:\n return fibonacci(n-1) + fibonacci(n-2)"}]; | |
| const sel = document.getElementById('sel'); | |
| DATA.forEach((d,i) => { const o=document.createElement('option'); o.value=i; o.textContent=d.instruction; sel.appendChild(o); }); | |
| function render(){ | |
| const d = DATA[sel.value]; | |
| document.getElementById('base').textContent = d.base; | |
| document.getElementById('ft').textContent = d.ft; | |
| const isPy = !/^```(js|javascript|java)/.test(d.base.trim()) && !/\bfunction\s+\w+\s*\(/.test(d.base); | |
| const t = document.getElementById('btag'); | |
| t.textContent = isPy ? 'markdown-fenced' : 'wrong language'; | |
| } | |
| sel.addEventListener('change', render); | |
| render(); | |
| </script> | |
| </body> | |
| </html> |