teleren/devto huggingface dataset:
ChatCraft v2.0.0
Tags: opensource, ai, typescript, react
Published: 2024-04-20 15:06:49

Finally, Its the last week of semester and we had our last class of Open Source Development Project with [David Humphrey](https://github.com/humphd). I would like to thank David for being my professor and mentor. I've taken 30 courses in Seneca and I would like to say that the three courses by David Humphrey were the one in which I learnt the most, i.e two open source courses which enhanced my github profile, gained confidence in git skills. Also before the courses ,I always wanted to contribute in Open Source but had no idea where to start from. I would also like to thank [Taras Glek](https://github.com/tarasglek) for giving me an opportunity to work on [ChatCraft.org](https://chatcraft.org/). Working on ChatCraft has been the biggest project I've ever worked on till date. 

## This week contributions

### PR 600
This [PR](https://github.com/tarasglek/chatcraft.org/pull/600) was a small one but It became very difficult for me as I got stuck with focus stuff on it.

The goal of this PR was to have a search bar to search between models and have pointer to currently selected model. It was glad to see that everyone wanted this PR to be merged as this was very benificial for selecting models in providers such as OpenRouter which have many models to select from.

The changes look like:

![Img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy9x8fyfmvyiuuyxfunf.png)

The hurdle in merging this PR:

The major issue this PR had was **Input** bar going out of focus when the menu was rendered again based on the query entered in the search bar. Resizing of the menu changed our mouse cursor to somewhere else, on another **MenuItem** which caused focus to go away from input. This was the default behavior of how ChakraUI/ ChakraMenu behaves so we coudn't modify it. After trying many options possible and still not able to get that. At the end David helped us to solve this by setting input to focus again on keyDown event.  

### Review 597
Apart from merging the PR above, i also reviewed another [PR](https://github.com/tarasglek/chatcraft.org/pull/597) of my classmate Katie which was based on an issue suggested by me while reviewing one of her previous PRs.

After testing the functionality and looking at the code structure, I approved the PR so that she could merge it.

## Overall Contributions to ChatCraft over the past 3 months
At first when I was first told that I'll be working on ChatCraft, I was scared thinking that how would I understand a codebase of such a big project. 
Till date, I merged **11 PRs with addition of over 650 lines of code** which is pretty good for someone who just started with this. 

![PRS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8vz28f4ywz7cyfl2qcl.png)

I ended this course with building many cool features for ChatCraft including share message functionality, made it easier to switch between providers, fixed some bugs, search bar for models and many more.
Begging for answer
Published: 2024-04-20 15:03:44

As a junior software developer, I wondered how the screen sizes turn out to be 576px, 960px, 1440px and so on. Meanwhile, phone or device screen sizes come in 480 * 800, 1920 * 1080. How do they arrived there? Please I need a convincing answer. I don't just want to follow but know it well enough. Thanks community
Cartoon quotes
Tags: cozechallenge, devchallenge, ai, machinelearning
Published: 2024-04-20 14:48:15

*This is a submission for the [Coze AI Bot Challenge](https://dev.to/devteam/join-us-for-the-coze-ai-bot-challenge-3000-in-prizes-4dp7): Bot Innovator.*

## What I Built
<!-- Tell us what your bot does, who it's for, and what problem it solves -->

Do you have that **nostalgia** from old cartoons? This AI re-awakens famous sayings from your beloved childhood shows.  

## Demo

<!-- Share a link to your bot in the Coze Bot Store and include screenshots or recordings showcasing a user's chat interface with your bot. -->

![cartoon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn6q88ewhvv2479wg2qd.png)


![cartoons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws2u4qiqgdrvzo2s24h8.png)

Start a conversation with [Cartoon quotes](https://www.coze.com/store/bot/7359938777533661190?bot_id=true) right now!

## Your Configuration

<!-- Screenshot or record your bot's configuration, including prompts and skills used.  -->


This is what this AI bot can do in terms of skills and traits

![skills](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltaulh0xll9489qpr81x.png)



![persona](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc86k529do96janxchi7.png)

## Journey

<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

That feeling of TV nostalgia got me a few days ago. So, why not unite it with this cool challenge? 🤔

This AI covers a wide range of TV cartoons, some of which maybe weren't broadcasted in some countries and might come as a big surprise! 🎊 

I'm really glad for this occasion, of working on an AI Bot which is supposed to bring the smile on the face, as cartoons did in our childhood. 🌞

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image (if you want). -->

<!-- Thanks for participating! -->
Veppo - The Jewelry & Fashion eCommerce Shopify Theme
Tags: webdev, shopify, javascript, programming
Published: 2024-04-20 14:36:28


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh07sxjexvajj93whg07.jpg)
Veppo is modern & clean [eCommerce shopify theme for best match](https://href.li/?https://themeforest.net/item/veppo-the-jewellery-fashion-ecommerce-shopify-theme/51039036?s_rank=1) to jewelry and fashion industry. Veppo has multifeature theme like ajax add to cart, responsive design, wishlist, quickview, swatch variant, multiple product details, top notification, drag & drop, RTL, SEO Optimize, Ajax search, Web fonts, easy to customize, Webfonts and many more.

Veppo has included versatile design to make online store for midlevel and small scale industry to sales their product. Veppo is also support for differential business like jewelry, diamond, color stone, fashion, fashion shop, watch, minimal fashion design, gadgets shop, electronics store, art store, clothing store, jewellery, minimal shop and any eCommerce store.

Veppo has included 25+ inner pages like About us, Contact us, Product grid & list, product details, terms & condition, privacy policy, faqs, blog grid & list and blog details page.

**Veppo Core Features**

- Multipurpose eCommerce Homepage
- Variantion of Product
- Product Grid & List
- Product Swatch & Dropdown
- Unique Sticky Header
- Stock Notification
- Advanced Mega Menu
- Mobile Optimized Design
- Deal Timer
- Newsletter Popup
- Quick View Popup
- Category With Options
- Product Filters
- Magnific Popup
- Fully Responsive
- Top Rated support
- Social Sharing
- Product Wishlist
- Fully Responsive
- Bootstrap 5.x
- Google Web fonts
- Well Documented
- RTL Supported
- SEO Optimization
- Life Time Free Update
- Instagram Feed
- 404 Page
- Blog Details Page
Ibc Jobs in Mumbai
Published: 2024-04-20 14:32:39

Ibc Jobs in Mumbai" offers a comprehensive platform for job seekers and employers in the vibrant city of Mumbai. Discover exciting opportunities and top talent with our specialized services. From IT to finance, engineering to healthcare, find your next career move or perfect hire with Ibc Jobs in Mumbai.

**[Ibc Jobs in Mumbai](https://www.mangalamjobs.com/current-openings/jobs/legal/)**
Two-Way Binding in Angular: Magic Mirror for Your Data
Tags: angular, webdev, softwaredevelopment
Published: 2024-04-20 14:26:57


Ever-Synced Data

_Imagine your UI reflecting changes like a magic mirror. That’s two-way data binding in Angular! It keeps your view (UI) and component data (model) constantly in sync._

Steps to Two-Way Magic

**1. Import FormsModule: Include it in your module (@NgModule({ imports: [FormsModule] })) for form-related directives.**

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Import FormsModule for ngModel

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Add FormsModule to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

**2. Use ngModel: Bind the component property to the input value with [(ngModel)]="propertyName" (like a banana in a box!).**

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular User';
}
```

```
<div>
  <label for="name">Name:</label>
  <input type="text" id="name" [(ngModel)]="name">
</div>
<p>Hello, {{ name }}!</p>
```

**3. Enjoy the Magic! Changes in the input update the property, and vice versa.**
Why do we need CORS to access CDN links?
Tags: webdev, javascript, beginners, programming
Published: 2024-04-20 14:24:46

## Intro

When you use a `Content Delivery Network (CDN)` to host static assets for your website, like `images` or `Javascript files`, those files are being served from a different domain than your main website.

This difference in domain can cause security issues with modern web browsers. 

Reason is that browsers hate it when you try to access some resources from a different server than your own website served from.

This is a policy of browsers called **"Same origin policy"**.

## What CORS has to do with this

In easy terms, CORS (Cross Origin Resource Sharing) is like a handshake between your website and CDN (could be other servers as well), saying it's okay to load resources from each other. 

It acts as a security check to prevent malicious scripts from loading unauthorized resources.

If header of request contains a CORS then good ✅👍 

otherwise bad, gets rejected👎❌

This meme I made to explain in easy terms:

![cors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qul4emknfc1skhfjk8fe.png)

Thats why you will see something written like `crossorigin` in the `cdn` links.

```html
<script 
  crossorigin 
  src="https://unpkg.com/react@18/umd/react.development.js"
>
</script>

<script 
  crossorigin 
  src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
>

</script>
```

## Conclusion
CORS help in allowing your website to access resources from different servers.

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other Web Development topics.

For paid collaboration, you can mail me at: [gmail](mail.shubhsharma19@gmail.com)

Connect with me on [Twitter](twitter.com/shubhstwt), [LinkedIn](linkedin.com/in/shubhsharma19) and [GitHub](github.com/shubhxg)

Thank you for Reading :)
Conversational AI for Everyone: Create Your Own LLM
Tags: linux, ollama, mario, wario
Published: 2024-04-20 14:19:24

Imagino que ya tienes tu docker de `ollama` funcionando, si no es así, mira el artículo [Run copylot locally](https://dev.to/elferrer/run-copilot-locally-34di).

Ahora vamos a divertirnos un poco. Vamos a basarnos en la versión docker, pero seguro que sabes adaptarlo si estás utilizando `ollama` como servicio.

Primero comprueba que tienes tu contenedor `ollama` funcionando:

```
docker ps -a
```

Si no está funcionando, levántalo con un `docker start`:

```
container_id=$(docker ps -a | grep ollama | awk '{print $1}')
docker start $container_id
```

Y si ni siquiera lo tenías creado, puedes crearlo con:

```
docker run -d -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama
```

Una vez te has asegurado que está funcionando, entra en el contenedor para añadir unos modelos más:

```
docker exec -it ollama /bin/bash
```

Instalamos `nano` para manejar archivos de texto:

```
apt install nano
```

Elegimos una ruta, por ejemplo `/opt/gemma`, para crear un par de modelos. Vamos a elegir a 'Mario' como primer modelo y a 'Wario' como segundo modelo.

Vamos allá:

```
mkdir /opt/gemma
nano /opt/gemma/Mario.modelfile
```

y le pegamos el contenido:

```
FROM gemma:2b
# sets the temperature to 1 [higher is more creative, lower is more coherent]
PARAMETER temperature 1
# sets the context window size to 1500, this controls how many tokens the LLM can use as context to generate the next token
PARAMETER num_ctx 1500
# sets a custom system message to specify the behavior of the chat assistant
SYSTEM """
You are Mario from Super Mario Bros. Answer as Mario, the assistant, only.
"""
```

Y ahora creamos el segundo fichero con `nano /opt/gemma/Wario.modelfile` y le pegamos el contenido:

```
FROM gemma:2b
# sets the temperature to 1 [higher is more creative, lower is more coherent]
PARAMETER temperature 1
# sets the context window size to 1500, this controls how many tokens the LLM can use as context to generate the next token
PARAMETER num_ctx 1500
# sets a custom system message to specify the behavior of the chat assistant
SYSTEM """
You are Wario from Super Mario Bros. Answer as Wario, the assistant, only.
"""
```

Ya tenemos creados los dos ficheros, ahora vamos a generar las dos imágenes:

```
ollama create gemma-Mario -f /opt/gemma/Mario.modelfile
ollama create gemma-Wario -f /opt/gemma/Wario.modelfile
```

Y salimos del contenedor:

```
exit
```

Vamos a probarlos:

```
docker exec -it ollama ollama run gemma-Mario "Who are you?"
docker exec -it ollama ollama run gemma-Wario "Who are you?"
```

Ya sabes hacer diferentes modelos. A jugar.
front end challenge
Tags: frontendchallenge, devchallenge, css
Published: 2024-04-20 14:07:09

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4), CSS Art: Earth Day._

## Inspiration
Earth day challenge

## Demo 

https://github.com/sharmi2020/Dev-challenge

## Journey 
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
جلب الحبيب 0020𝟏0𝟐703𝟗2𝟱𝟒 شيخ روحاني - مضمون
Tags: discuss
Published: 2024-04-20 14:03:22


جلب الحبيب ،شيخ روحاني - رقم شيخ روحاني - رد المطلقة - جلب الحبيب السعودية - شيخ روحاني فى السعودية - شيخ روحاني فى الامارات - جلب الحبيب الامارات
Discover a Powerful Form Validation Library Without the Need for JavaScript Code
Tags: javascript, html
Published: 2024-04-20 13:44:26

Dive into the world of HTML validation with Trivule: a revolutionary library that automates and streamlines form validation without the need for JavaScript. Free yourself from the hassles of validation and focus on the core of your application, saving valuable time with every interaction with your forms.

**Key Features:**

- **Simple Installation:** Get started in a flash with easy installation and initialization.

  ```html
  <script>
    const tr = new Trivule();
    tr.init();
  </script>
  ```

- **Code-Free Simplicity:** Apply complex validation rules without ever touching a line of JavaScript. Trivule handles validation rules with ease.

  - **Example:** 
  ```html
  <input type="text" data-tr-rules="required|email">
  ```

- **Validation Trigger:** Trigger validation in real-time using a range of built-in or custom JavaScript events.

  - **Example:** 
  ```html
  <input data-tr-events="mouseenter|blur|my-custom-event" />
  ```

- **Easy Customization:** Style your form fields based on their validation status using CSS classes.

  - **Example:** 
  ```html
  <input type="text" data-tr-invalid-class="invalid" data-tr-valid-class="valid">
  ```

- **Customized Messages:** Enhance user experience by displaying tailored validation messages.

  - **Example:** 
  ```html
  <input type="text" data-tr-rules="required" data-tr-messages="This field is required.">
  ```

- **Message Display Control:** Specify where to display error messages for a field in case of validation failure.

  - **Example:** 
  ```html
  <input type="text" data-tr-feedback="input-name">
  ```

- **Total Control:** Master the behavior of your forms with advanced JavaScript functionalities.

**Advanced Customization:**

Explore a range of advanced features to meet your specific needs:

- **Custom Actions:** Define actions to take based on the validation state of a field.
  
- **JavaScript Configuration:** Interact with your forms autonomously and powerfully.
  
- **Custom Extensions:** Add new validation rules for a tailored experience.

- **Multilingual Support:** Personalize validation messages in multiple languages for a global reach.

**Conclusion:**

In summary, Trivule offers a wide range of intuitive attributes to configure and validate your forms effortlessly. Its simple installation and power make it the perfect tool to ensure the quality of your user data. Dive into the world of HTML validation with Trivule today and transform your web development experience.

[Discover Trivule here](https://www.trivule.com)
I made an infinite canvas to work with LLMs better
Tags: sideprojects, svelte, sveltekit, ai
Published: 2024-04-20 13:20:28


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2fwryk5s56km29lm54r.png)


This project came about after talking with a friend who was trying to use ChatGPT to help him write a research paper by doing simple things like incorporating notes, rephrasing sections, building outlines and sub-outlines.

However, he described this process as painful as he needed to constantly be switching windows and tabs for each of these subtasks - each of which required different context (notes that would be copy/pasted into the chat).

I've become convinced that a chat interface is not the right way to work with AI when the process needs to be collaborative and iterative. Which is why I'm building: https://lxi.ai

You can do things like:

- Store AI generated text/outlines you like on the canvas that you can then edit directly.
- Control the context when using chatting or generating outputs with AI (Just connect the dots)
- Apply the same prompt over multiple inputs (Just connect the dots)
- Share the canvas with a teammate and collaborate on the same canvas in real-time

Some use cases:

- Draft that blog post you've been thinking about (hint: try starting with an outline)
- Plan that trip you've been wanting to take (hint: create your daily itinerary then use the function node to create an hourly itinerary)
- Draft some social media posts (hint: Add your landing page copy to a text box, connect to a AI Generator node)

Overall, I'm not into this whole replace or a one and done approach to using AI when making things. I'd much rather like to see AI accelerate the tedious parts which is what I'm hoping lxi will do.

Thanks for checking it out and please create a free account and let me know if you have any feedback in the comments!

Link: https://lxi.ai
Built with: sveltekit, Liveblocks, lucia auth, neon
A. Beautiful Matrix // Solution in java
Published: 2024-04-20 13:17:12

```
import java.util.Scanner;

public class Problem {
    public static void main(String[] args) {
      Scanner input = new Scanner(System.in);
    int[][] nums = new int[5][5];
    for(int i = 0; i < nums.length; i++) {
    for(int j = 0; j < nums.length; j++) {
      nums[i][j] = input.nextInt();
    }
    }

    for(int i = 0; i < nums.length; i++) {
      for(int j = 0; j < nums.length; j++) {
        if(nums[i][j] == 1) {
          System.out.println(Math.abs(i-2) + Math.abs(j-2));
        }
      }
      }

    }
}


```
Réparation CAS2 CAS3 CAS3+ CAS4 FEM BDC
Published: 2024-04-20 13:16:25


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62wa2dxk5hv3wxncx1ro.jpg)

 Les symptômes d'un boîtier CAS3 en panne peuvent varier selon la nature du problème, mais voici quelques signes courants à surveiller :

1• Problèmes de démarrage du véhicule : L'un des signes les plus évidents d'un problème avec le boîtier CAS3 est lorsque le véhicule ne démarre pas du tout ou démarre de manière intermittente.

2• Problèmes électriques : Des problèmes électriques tels que des dysfonctionnements des feux, des vitres électriques, des rétroviseurs électriques ou d'autres accessoires peuvent survenir en raison d'un dysfonctionnement du boîtier CAS3. Code défaut A0C1 sortie terminal 50 pas de signal.

3• Clés non reconnues : Si le boîtier CAS3 ne reconnaît pas les clés du véhicule, cela peut entraîner l'impossibilité de démarrer le moteur ou même des problèmes de verrouillage/déverrouillage des portes.

4• Messages d'erreur sur le tableau de bord : Des messages d'erreur tels que "clé non détectée" ou "système d'immobilisation défectueux" peuvent s'afficher sur le tableau de bord.

5• Problèmes de sécurité : Le boîtier CAS3 est crucial pour le système de sécurité du véhicule. Si ce dernier est défectueux, il peut entraîner des problèmes de sécurité tels que des alarmes qui se déclenchent de manière aléatoire ou des difficultés à activer/désactiver le système d'alarme.

POUR PLUS D’INFOS AU 0780780148 OU SUR https://[www.diagcompteur.com/Reparation_boitier_CAS3_BMW_MINI.html](url)