Build LLM-powered Web Apps with Django and Gemini API

Build LLM-powered Web Apps with Django and Gemini API

1. Build LLM-powered Web Apps with Django and Gemini API @weskambale kambale.dev Wesley Kambale
2. • Machine Learning Engineer • Community Builder • Explore ML Facilitator with Crowdsource by Google • Consultant at The Innovation Village • Google Dev Library Contributor Profile Interests Experience • Research in TinyML, TTS and LLM
3. The agenda to agend… • Introduction to LLMs & Gemini API • Setting up Django • Integrating LLMs with Django using Gemini • Building a Simple LLM-powered Web App • Q&A • Resources & Takeaways
4. Introduction to LLMs & Gemini API What are LLMs and what is Gemini API? • Large Language Models (LLMs): Machine learning models designed to understand and generate human-like text. • Gemini API: An API that allows developers to interact with LLMs using natural language instructions.
5. Django Overview What is Django? High-level Python web framework for building web apps quickly and efficiently. Robust, scalable, and perfect for rapid prototyping. Ideal for integrating machine learning and AI features.
6. Overview of Gemini API What is the Gemini API? Gemini API is an interface for natural language processing. Integrates with LLMs to handle queries, generate text, or perform tasks via natural language prompts. Choose the right Gemini model
7. Install Django and Gemini
8. Create a Django Project
9. Create a Django App
11. INSTALLED_APPS = [
 'django.contrib.admin',
 'django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 'rest_framework',
 'chat_app',
 ]
 
 GEMINI_API_KEY = 'your_gemini_api_key'
 

12. Define Models
13. Migrate the Database
14. from django.shortcuts import render, reverse
 from django.contrib.auth.decorators import login_required
 from .models import ChatBot
 from django.http import HttpResponseRedirect, JsonResponse
 import google.generativeai as genai
 
 genai.configure(api_key="YourAPI-Key")
 
 @login_required
 def ask_question(request):
 if request.method == "POST":
 text = request.POST.get("text")
 model = genai.GenerativeModel("gemini-pro")
 chat = model.start_chat()
 response = chat.send_message(text)
 user = request.user
 ChatBot.objects.create(text_input=text, gemini_output=response.text, user=user)
 (request, "chat_bot.html", {"chats": chats})

15. # Extract necessary data from response
 response_data = {
 "text": response.text, # Assuming response.text contains the relevant response data
 }
 # Add other relevant data from response if needed
 else:
 return JsonResponse({"data": response_data})
 
 return HttpResponseRedirect(reverse("chat")) # Redirect to chat page for GET requests
 
 @login_required
 def chat(request):
 user = request.user
 chats = ChatBot.objects.filter(user=user)
 return render

16. <body>
 <form id="promptForm">
 <input type="text" name="prompt" placeholder="Enter your prompt">
 <button type="submit">Generate</button>
 </form>
 <div id="response"></div>
 
 <script>
 document.getElementById('promptForm').onsubmit = function(e) {
 e.preventDefault();
 const prompt = document.querySelector('[name="prompt"]').value;
 
 fetch(`/generate/?prompt=${prompt}`)
 .then(response => response.json())
 .then(data => {
 document.getElementById('response').innerText = data.result;
 });
 }
 </script>
 </body>
 

17. Resources… Django: https://www.djangoproject.com/ Gemini: https://deepmind.google/technologies/gemini/ Django Docs: https://docs.djangoproject.com/en/5.1/
18. Mwebale! Any questions? @weskambale kambale.dev Wesley Kambale