DEV Community: Gopi Krishna Suvanam

Scribbler.live

Gopi Krishna Suvanam — Thu, 27 Mar 2025 20:55:53 +0000

[Boost]

Gopi Krishna Suvanam — Thu, 06 Mar 2025 09:47:18 +0000

Callbacks vs Promises vs Async/Await: The Ultimate Guide to Asynchronous Javascript

Shubham Tiwari ・ Mar 3

#webdev #javascript #beginners #tutorial

How to use LLM in Browser using WebLLM

Gopi Krishna Suvanam — Wed, 19 Feb 2025 05:01:20 +0000

The rise of large language models (LLMs) like GPT-4 and Llama has transformed the AI landscape, but most of these models run on powerful cloud servers. What if you could run an LLM directly in your browser without relying on external APIs? This is where WebLLM comes in.

What is WebLLM?

WebLLM is an open-source project that enables running large language models entirely in the browser using WebGPU. This means you can execute LLMs like Llama 3, Mistral, and Gemma locally on your machine without requiring API calls to external servers.
Jump to notebook

Why Use WebLLM?

🔒 Privacy

Since WebLLM runs on your device, no data is sent to external servers, making it ideal for privacy-conscious applications.

⚡ Low Latency

Because there’s no network request to an API, WebLLM provides near-instant responses compared to cloud-based models.

🌍 Offline Capability

WebLLM allows running AI-powered apps without an internet connection once the model is downloaded.

💰 Cost Savings

Since there’s no need for expensive API calls (like OpenAI or Hugging Face’s hosted models), WebLLM can significantly reduce costs for AI applications.

How Does WebLLM Work?

WebLLM leverages WebGPU, the next-gen browser graphics API, to run models efficiently on your GPU. It builds on MLC LLM, which compiles and optimizes models to run in the browser.

Supported Models

WebLLM currently supports:
✅ Llama 3 (Meta AI)
✅ Mistral (Open-weight LLM)
✅ Gemma (Google’s lightweight LLM)
✅ StableLM (Stability AI)

Getting Started with WebLLM

Jump to notebook

1️⃣ Add WebLLM to Your JavaScript Project

You can integrate WebLLM via a CDN or npm package:

<script type="module">
  import { init, chat } from 'https://cdn.jsdelivr.net/npm/webllm@latest';

  async function main() {
    const model = await init('Llama-3-8B');
    const response = await chat(model, 'What is WebLLM?');
    console.log(response);
  }

  main();
</script>

2️⃣ Running WebLLM in Scribbler (JavaScript Notebook)

If you prefer notebooks (like Jupyter but for JavaScript), you can try this in Scribbler:

window.default = await import('https://cdn.jsdelivr.net/npm/webllm@latest');

const model = await init('Mistral-7B');
const response = await chat(model, 'Explain quantum computing');
response;

3️⃣ Deploying a Chatbot with WebLLM

Want to build a chatbot with WebLLM? Here’s a minimal setup:

<input id="prompt" placeholder="Ask me anything...">
<button onclick="runChat()">Send</button>
<p id="output"></p>

<script type="module">
  import { init, chat } from 'https://cdn.jsdelivr.net/npm/webllm@latest';
  let model;

  async function setup() {
    model = await init('Gemma-2B');
  }

  async function runChat() {
    const input = document.getElementById('prompt').value;
    const response = await chat(model, input);
    document.getElementById('output').innerText = response;
  }

  setup();
</script>

Performance Considerations

WebLLM requires a modern GPU and browser to run efficiently. It works best on:

Google Chrome (latest)
Edge (WebGPU enabled)
Firefox Nightly (WebGPU experimental)

For best performance, enable WebGPU in Chrome by visiting:

chrome://flags/#enable-webgpu

Future of WebLLM

As WebGPU adoption grows, WebLLM could power offline AI assistants, interactive AI websites, and even AI-enhanced games. Future enhancements may include multi-modal AI (text + images) and custom fine-tuned models for specific applications.

Final Thoughts

WebLLM is a game-changer for AI development, allowing LLMs to run entirely in the browser without cloud dependency. Whether you're building chatbots, AI-enhanced web apps, or offline AI tools, WebLLM makes it possible.

🚀 Ready to try WebLLM? Drop a comment if you have questions or want more tutorials! 🙌

Embracing the Simplicity and Power: Why I Love Vanilla JavaScript

Gopi Krishna Suvanam — Wed, 23 Aug 2023 06:52:07 +0000

In the vast expanse of the digital realm, where tools and frameworks shine in fleeting brilliance, there exists a timeless beauty that draws me like a moth to a flame. This beauty resides in the simplicity and raw power of vanilla JavaScript. In a world that seems obsessed with the allure of complex libraries and paradigms, my heart finds solace in the foundational elegance of this unadorned language.

In the grand tapestry of programming languages, Python, Java, and JavaScript each hold their unique positions, like constellations lighting up the night sky. Python, with its graceful syntax, beckons with open arms, offering a path of least resistance to both newcomers and seasoned coders. Its clarity and readability create an immediate connection between thought and implementation, akin to a poet effortlessly weaving verses. Yet, as I contemplate Python's allure, I am drawn back to JavaScript's raw honesty.

Java, on the other hand, stands tall and steadfast, a guardian of structured programming and object-oriented principles. Its disciplined nature appeals to the meticulous craftsman within us, constructing intricate architectures with a sense of order akin to that of an architect designing a grand cathedral. However, in the midst of Java's meticulousness, JavaScript whispers a different tale.

JavaScript, in its vanilla form, is not bound by the confines of stringent structure or poetic grace. It is a language that thrives in the open wilderness, where lines of code are not just tools but brushstrokes on a canvas. In its seemingly humble syntax lies a canvas inviting experimentation, evolution, and the spark of creativity. There is a raw, primal connection to the web's very core, a dance with the Document Object Model (DOM) and asynchronous events that feels like communing with the digital spirit of the age.

As we traverse the landscapes of programming languages, we find ourselves faced with trade-offs between simplicity and complexity, between poetry and prose, between structure and fluidity. Python's embrace is warm and comforting, like a serene lake reflecting the world around it. Java's embrace is firm and reassuring, like the steady grip of a mentor guiding us through a labyrinth.

Yet, JavaScript's embrace is dynamic and boundless, like the wind carrying whispers from every corner of the digital cosmos. It celebrates the unfiltered essence of coding, reminding us that the journey matters as much as the destination. With it, we navigate the intricate dance of the DOM, breathing life into static pages and molding them into interactive experiences.

In a world that's often in a hurry to embrace the next big thing, the quiet wisdom of vanilla JavaScript beckons us to pause, to revere the foundational artistry of our craft. Just as a painter returns to the simplicity of a blank canvas and a writer to an empty page, so too does the JavaScript developer find solace in the elegance of the unadorned canvas provided by vanilla JavaScript. It's a journey not just through code but through the essence of creation itself, where every keystroke is a brushstroke and every line a note in the symphony of the web.