DEV Community: Subash-Lamichhane

Integrate Daytona into a Machine Learning Project with React, Node, and Python

Subash-Lamichhane — Fri, 10 Jan 2025 09:22:12 +0000

Being a Developer, You Know the Struggle

If you’ve ever spent hours just setting up someone else’s project from github then you’re not alone. It’s frustrating, tedious, and downright unproductive for both the project creator and anyone trying to use it. Many developers give up midway because the setup process feels like wading through quicksand. So, what’s the solution?

Meet Daytona, the hero you didn’t know you needed! 🦸‍♂️

Introduction to Daytona

Daytona is a self-hosted development environment manager that simplifies and makes setting up projects lightning-fast ⚡. It’s designed to simplify and accelerate workflows, whether you’re working on remote development or managing environments as code. Daytona takes the hassle out of complex setups, letting you focus on what truly matters—building and creating.

As Daytona puts it:
“Your team should spend less time configuring and more time creating.”

This image from Daytona clearly explains how you can save your time and hassle with Daytona.

daytonaio / daytona

The Open Source Dev Environment Manager.

The Open Source Development Environment Manager

Set up a development environment on any infrastructure, with a single command

Documentation · Report Bug · Request Feature · Join Our Slack · Twitter

Features

Single Command: Activate a fully configured development environment with a single command.
Runs everywhere: spin up your development environment on any machine — whether it's local, remote, cloud-based, physical server, or a VM & any architecture x86 or ARM.
Configuration File Support: Initially support for dev container, ability to expand to DevFile, Nix & Flox (Contributions welcome here!).
Prebuilds System: Drastically improve environment setup times (Contributions welcome here!).
IDE Support : Seamlessly supports VS Code & JetBrains locally, ready to use without configuration. Includes a built-in Web IDE for added convenience.
Git Provider Integration: GitHub, GitLab, Bitbucket, Bitbucket Server, Gitea, Gitness, Azure DevOps, AWS CodeCommit, Gogs & Gitee can be connected, allowing…

View on GitHub

Why Daytona? 🤔

Let’s address the elephant in the room: Why should you use Daytona? The better question is, why shouldn’t you? Here’s what makes Daytona a developer’s best friend:

1. Speed and Agility: Daytona’s architecture is all about getting things done quickly and adapting to challenges on the fly. 🏎️
2. Commitment to Execution: It ensures every project, no matter how complex, is executed with precision and excellence. 🛠️
3. Proactivity: Daytona anticipates your needs, making it a proactive partner in your development process. 🔮
Key Features of Daytona:

Security: Securely connects your local machine and remote environments without manual port forwarding. 🔒
IDE Support: Works seamlessly with Visual Studio Code and JetBrains IDEs, giving you a local-like development experience. 💻
SCM Integration: Pull repositories from GitHub, GitLab, Bitbucket, or Gitea directly into Daytona workspaces. 🔗
Multi-Project Workspaces: Perfect for working on microservices or multi-repository projects within a single workspace. 🗂️
Reverse Proxy Support: Access workspaces on public or restricted networks with ease. 🌐
Extensible Core: Customize Daytona with plugins written in Go, adding functionality tailored to your needs. 🛡️

How I Integrated Daytona into TerraGrow (my project):

What is TerraGrow? 🌱

TerraGrow is an intelligent web app that uses a Random Forest model for crop recommendations and the Llama3-8b-8192 model from Groq to suggest yield improvement strategies. By analyzing factors like nitrogen (N), phosphorus (P), potassium (K), temperature, humidity, and pH, it helps farmers make smarter planting decisions.

The Challenge: 🤯 Integrating Python with Node.js and machine learning models made TerraGrow’s project structure complex. I wanted other developers to run it effortlessly, but the setup process was daunting. That’s when I discovered Daytona (thanks to Quira’s Quest 23—shoutout to Quira!).

Here’s how I did it, and how you can do it too:

Step 1: Setting Up Daytona 🚀
I installed Daytona on my Linux machine using its straightforward installation guide. With Docker pre-installed, the setup was a breeze:

(curl -sf -L https://download.daytona.io/daytona/install.sh | sudo bash) && daytona server -y && daytona

For detailed instructions, check out Daytona’s installation guide.

Step 2: Adding devcontainer.json 🛠️
Next, I created a devcontainer.json file inside the .devcontainer folder.
For this, Devcontainer.ai helped me generate the initial file, though I had to tweak it for my needs.
Here’s the final version:

{
    "name": "React + Node.js Dev Container",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
    "features": {
      "python": "3.10"
    },
    "forwardPorts": [
      3000,
      5000
    ],
    "postCreateCommand": "cd frontend && npm install && cd ../backend && pip install -r requirements.txt && npm install"
}

I then pushed these updates to the GitHub repository.

Step 3: Creating a Workspace 🖥️
To run the daytona you can run

daytona serve

You can also access available options using command daytona through your terminal.

Once Daytona was up and running, I launched it with the daytona command. The interface was sleek and intuitive. To create a workspace, I used:

daytona create https://github.com/Subash-Lamichhane/TerraGrow-daytona

This command pulled my repository and set up the workspace. Boom—everything was ready to go! 🎉
Note: If you are using vite for creating react project then you must change "dev": "vite ",section in package.json to "dev": "vite --host 0.0.0.0",to run the frontend in the workspace.

Conclusion 🎯

Integrating Daytona into TerraGrow made my project more accessible, streamlined, and developer-friendly. The once-complicated setup became a breeze, allowing others to run it effortlessly.
So, whether you’re working on a small website or a large-scale project, Daytona can save you time, headaches, and frustration.
Trust me, it’s a game-changer. Try it out, and let the coding fun begin!

Here are some helpful links:

My Project: Check out TerraGrow on GitHub to see the code and learn how it all works.
Demo Video: Watch the TerraGrow demo video to see it in action.
Daytona: Discover more about Daytona on their GitHub page.
Quira: Learn about Quira, the platform that introduced me to Daytona, by visiting their website.

Introducing QUIZORA: Explore the Joy of Learning with Quizzes Just for You!

Subash-Lamichhane — Mon, 30 Sep 2024 10:52:41 +0000

Effective learning has taken a backseat in today's fast world where volumes of information that we go through on a daily basis have gone high. Now, let me introduce QUIZORA: a web application revolutionary in design, making effective learning engaging and fun! .

How did I come up with the idea:

The idea of QUIZORA clicked in my mind when I was looking for last-minute revision material, which wasn't really good enough to meet my needs. Most of them did not boast either customization or variety in a quiz-based format.

Having gone through the design, I found Shad-CN UI's sleek and user-friendly design to align perfectly with what I wanted for a modern, accessible learning platform. Finally, the simple yet interactive interface of my friend's Tic-Tac-Toe project furthered the experience that I wanted to replicate with QUIZORA.

Key Features

1. Personalized Quiz Generation
QUIZORA allows users to get questions generated via different tags: Science, Technology, Space, and Biology. You can even go into granular detail if you wish by choosing different models to get your quiz experience just right. Just think about being tested on such exciting questions as, "Which planet has most moons?" or "What is the significance of natural selection?"

2. Multiple AI Models for Varied Performance
One of the great features in QUIZORA is your ability to select one among three advanced AI models, which are Llama3-8b-8192, Mistral-Small, and GPT-4o-Mini. This further provides you with a gamut of performance levels, from which both beginners and seasoned quiz lovers can take their ultimate benefit.

3. Save and Load Question Sets
Got a favorite quiz? QUIZORA, automatically saves your generated question sets for later use. This will be great for studying or sharing with friends.

4. Interactive UI
The interface is intuitive and pleasingly interactive. Skim through categories, see questions, and answer them in an interactive manner- learning was never so much fun.

Why QUIZORA?

Living in a time when personalized learning is becoming essential, QUIZORA stands out in marrying technology and education through playing. We gamify the quizzes for an engaging experience with the material, furthering knowledge retention and understanding.

How QUIZORA Leverages Multiple AI Models

These variations of generated content are there because different AI models have their respective pros and cons. QUIZORA runs on three models:
Llama3-8b-8192
Excellent token processing speed, reaching 212.7 tokens/s, thus being perfect for users who need high efficiency and speed. It is accessed via Groq.

GPT-4o-Mini
Has a balanced experience because it has moderate speed, 112.9 tokens/s, while maintaining very reliable quality. It is accessed via the specialized API from NAGA.

Mistral-Small
Much slower in token processing at 80.7 tokens/s but makes up by being a lot more creative and deeper.

From our analysis, we have also found that Llama3-8b-8192 consistently delivered fastest responses. While, GPT-4o-mini and Mistral-Small's output speed were marginal for our task. Due to moderate requirements of QUIZORA project, all three models every provided similar performance results.

Source of performance data: Artificial Analysis Leaderboard
Source of images: Artificial Analysis

Challenges

Challenges Smooth card swiping, animations were one of the big challenges I had to work with to implement an interactive user experience. Quite a great deal of effort went into fine-tuning the transitions and movements to feel natural and responsive.

Of course, there were a lot of challenges throughout this project; another major one was designing the UI by using only two colors. It was hard to strike a balance between simplicity and visual appeal with a limited color palette, but ultimately it made me focus on clean and minimalistic design elements that would enhance the overall look and feel of QUIZORA.

Future plan

Perhaps the most important feature I will be implementing is the ability to explore QUIZORA with friends in real time. Users can create custom rooms with unique codes, which enables them to participate in quizzes together and make learning more interactive and shared.

Smarter UI Animations: To add to that, I want to make it more interactive with UI animation features. These will make the platform more interactive and visually appealing to its users.

Integration of Image Generation: Another exciting feature in the future is to integrate image generation into QUIZORA. This will enable users to create image-based questions, hence opening a whole new dimension toward quiz formats and enhancing the learning experience altogether.

Conclusion

QUIZORA is innovative in its use of multiple AI models because such practice not only enriches the quiz generation process but also guarantees a way in which every user may find the perfect fit for them. QUIZORA gives users options and ownership in order to make their learning more personalized and effective.

Installation

For installation follow following steps:

Install nodejs and mongodb into your machine.

Clone the Repository

git clone https://github.com/Subash-Lamichhane/QUIZORA.git

Frontend Setup
Navigate to the frontend directory and install dependencies:

cd QUIZORA/frontend
yarn

Start the development server:

yarn run dev

Backend Setup
Navigate to the server directory and install dependencies:

cd ../backend
yarn

Set up the environment variables by creating a .env file in the backend directory and add given details:

MONGO_URI=mongodb://localhost:27017/quizdb
NAGA_API_KEY="YOUR NAGA KEY HERE"
MISTRAL_API_KEY="YOUR MISTRAL KEY HERE"
OPENAI_BASE_URL=https://api.naga.ac/v1
GROQ_API_KEY="YOUR GROQ API KEY HERE"

You can get your MISTRAL_API_KEY from here
You can get GROQ_API_KEY from here
You can get NAGA_API_KEY from NagaAI's discord server.

Start the backend server:

yarn run dev

The backend server will be running on PORT 3000.

Populate database with sample data while backend is running:

node populateDatabase.js

Usage:

Navigate to the Quizora Page: Start by clicking "Get Started" at home page.
Choose Your Tags: Select the tags you're interested in, like Science, Technology, or Space.
Select an AI Model: Pick a model based on your preferred performance—speed, creativity, or balanced.
Generate Your Quiz: Hit the "Quizora" button and watch as your personalized quiz is generated instantly.
Explore quizzes: Swap cards to get next cards, click on card to view answer to question.

End Results:

Explore Section:

Create Quizora:

Add Details:

Quizora:

Demo

Click here for demo

This project was created for Quira quest 16: School of open source
To explore Quira you can visit:
https://quira.sh/

Support Me! 🌟

Help me by:

Voting for me on Quira: Vote here!

Starring my GitHub repo: Give my repo a star!