teleren/devto huggingface dataset:
Chatbot UI: The Advanced Chatbot Kit for OpenAI's Chat Models
Tags: opensource, programming, stackfoss, chatbot
Published: 2023-06-21 21:27:20

---
title: Chatbot UI: The Advanced Chatbot Kit for OpenAI's Chat Models
published: true
date: 2023-03-24 17:52:18 UTC
tags: opensource, programming, stackfoss,chatbot
canonical_url: 
---

### Chatbot UI: An Advanced Chatbot Kit for OpenAI Models

Chatbots have been around for quite some time now, but their popularity has skyrocketed in recent years due to the advancements in artificial intelligence and natural language processing technologies. OpenAI is one such technology that has made it possible to create more sophisticated and human-like chatbots. Chatbot UI is an advanced chatbot kit for OpenAI's chat models built on top of Chatbot UI Lite using Next.js, TypeScript, and Tailwind CSS.

**What is Chatbot UI?**

[Chatbot UI](https://github.com/mckaywrigley/chatbot-ui) aims to mimic ChatGPT's interface and functionality. It provides a user-friendly interface for users to interact with chatbots built using OpenAI's GPT models. All conversations are stored locally on your device, ensuring your privacy and security.

**Updates**

Chatbot UI is continually being updated to provide a better user experience. The recent updates include:

- Folders (3/24/23)
- Search chat content (3/23/23)
- Stop message generation (3/22/23)
- Import/Export chats (3/22/23)
- Custom system prompt (3/21/23)
- Error handling (3/20/23)
- GPT-4 support (access required) (3/20/23)
- Search conversations (3/19/23)
- Code syntax highlighting (3/18/23)
- Toggle sidebar (3/18/23)
- Conversation naming (3/18/23)
- Github flavored markdown (3/18/23)
- Add OpenAI API key in app (3/18/23)
- Markdown support (3/17/23)

**Modifications**

Users can modify the chat interface, sidebar interface, and system prompt to their liking. They can do so by making changes in the components/Chat, components/Sidebar, and utils/index.ts files.

**Deploy**

Users can host their own live version of Chatbot UI with Vercel, fork it on Replit, or use Docker.

**Running Locally**

To run Chatbot UI locally, users need to follow a few simple steps:

1. Clone the repository.

```
git clone https://github.com/mckaywrigley/chatbot-ui.git

```

1. Install dependencies.

```
npm i

```

1. Provide OpenAI API Key.  
Create a .env.local file in the root of the repo with your OpenAI API Key:

```
OPENAI_API_KEY=YOUR_KEY

```

1. Run the app.

```
npm run dev

```

1. Use it.  
You should be able to start chatting.

**Contact**

If you have any questions, you can reach out to the developer on [Twitter](https://twitter.com/mckaywrigley).

* * *

Chatbot UI is an advanced chatbot kit that provides a user-friendly interface for users to interact with chatbots built using OpenAI's GPT models. With the continuous updates and modifications, users can expect a better user experience and more customization options. Running Chatbot UI locally is easy, and users can host their own live version or fork it on Replit.
Upload image with loader using Angular and Template driven form.
Published: 2023-03-24 17:38:30

In web applications, it is common to upload files by the user, like profile photos, cover photos ....

In this tutorial we will discover how to upload a file with a loader using Angular framwork and template driven form.

To begin you must create a blank angular project using this command. You obtain a ready angular project for this tutoriel. Next, open your project in your favorite code editor.

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

In app.module.ts file, we need to import the form module and httpClient module of angular to enable using forms and possibility to make request on API.

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

Next, create an service and  name this **upload** using the following command provide by angular CLI.

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

In upload.service.ts file, we will add some functions that allowed to make  request API. In the end your upload.service.ts file should be like this.

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

Now, create an component with name "upload-file", for that use the following command.

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

Install bootstrap css with npm install bootstrapp and import it in style.scss in your src directory.
 
We can now work in our component, in "upload-file.component.html" file paste this code.

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

In upload-file.component.ts we paste the following code to end this feature correctly.

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

Your app.component.html should be like this.

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



https://github.com/JulesAD96/uploadImage
[Desafio] - 10 Desafios Simples de System Design: Resolução 0/9 (Separar um Banco de Dados em Dois)
Published: 2023-03-24 17:37:01

> Conteúdo Original em https://twitter.com/zanfranceschi/status/1639309447918157824

---

Ei dev,

Proposta de resolução do Desafio 0/9 dos 10 Desafios Simples de Design System que postei recentemente.

↓

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

https://twitter.com/zanfranceschi/status/1638232583057313792

---

A principal coisa que você deveria considerar num desafio assim é o motivo da separação. Quando passei por isso, era literalmente para aliviar o banco, deixá-lo com menos registros para que ficasse mais rápido. O banco tinha muitos milhões de registros.

A solução foi simples.

---

\- Criação duma Rotina Diária de Movimentação de Dados

Criei uma rotina diária para fazer a movimentação dos registros mais antigos que X tempo para o banco histórico. Claro, a definição de X foi feita depois de uma análise das consultas mais comuns em termos de período.

---

\- Modificação nas Rotinas de ETL

Esse banco servia de insumo para relatórios. E essa foi a parte mais chata pois foi necessário fazer joins para os relatórios que contivessem dados dos dois bancos (informações anuais, por exemplo).

---

\- Modificação na Experiência do Usuário

Seria complexo e contra o propósito da separação dos banco continuar oferencendo aos usuários dados antigos de forma transparente. Por isso, simplesmente foi adicionada uma funcionalidade nova e separada de consulta de registros antigos.

---

Essa funcionalidade de consulta de dados antigos funcionava de forma assíncrona – uma planilha era gerada após o processamento. Assim, foi fácil manter o banco histórico com poucos recursos computacionais e com bom controle de demanda de acessos.

---

Se na funcionalidade de consulta já existente fosse detectada uma consulta maior que o período X definido, era mostrada uma mensagem sobre a opção da consulta histórica.

E essa foi a solução adotada para esse desfio – funcionou muito bem.
Serge - LLaMa Made Easy: A Self-Hosted Chat Interface for Alpaca Models
Tags: opensource, programming, stackfoss, llama
Published: 2023-06-21 21:28:58

---
title: Serge - LLaMa Made Easy: A Self-Hosted Chat Interface for Alpaca Models
published: true
date: 2023-03-24 17:31:58 UTC
tags: opensource, programming, stackfoss,LLaMa
canonical_url: 
---

### Serge - LLaMa Made Easy 🦙: A Self-Hosted Chat Interface for Alpaca Models

Serge is a chat interface that makes running Alpaca models easy. Based on llama.cpp, it is entirely self-hosted, which means that no API keys are needed. The best part? It fits on just 4GB of RAM and runs on the CPU.

With a SvelteKit frontend, MongoDB for storing chat history and parameters, and FastAPI + beanie for the API, wrapping calls to llama.cpp, Serge is a complete package for anyone looking to run Alpaca models easily.

**Getting Started with Serge**

Setting up Serge is a breeze, and running it with Alpaca 7B is a simple four-step process:

1. Clone the 'serge' repository and navigate to the directory:

```
git clone https://github.com/nsarrazin/serge.git && cd serge

```

1. Copy the '.env.sample' file to '.env':

```
cp .env.sample .env

```

1. Start the Docker containers:

```
docker compose up -d

```

1. Download the Alpaca 7B model:

```
docker compose exec api python3 /usr/src/app/utils/download.py tokenizer 7B

```

And that's it! Head over to [http://localhost:8008/](http://localhost:8008/) to start using Serge.

**Supported Models**

Currently, Serge only supports the Alpaca 7B, 13B, and 30B models. However, there is a download script inside the container for downloading these models. If you have existing weights from another project, you can add them to the 'serge\_weights' volume using 'docker cp'.

**Support and What's Next**

If you need help with setting up Serge, feel free to join the Discord community at  
[https://discord.gg/62Hc6FEYQH](https://discord.gg/62Hc6FEYQH).

The developers of Serge have a lot of exciting plans for the future, including user profiles and authentication, different prompt options, LangChain integration with a custom LLM, and support for other llama models and quantization.

* * *

Serge is a fantastic tool for anyone looking to run Alpaca models easily. With its simple setup process and self-hosted nature, it is perfect for anyone who wants complete control over their models. With a friendly community to provide support, Serge is an excellent choice for anyone looking to get started with Alpaca models.
JavaScript: Um pouco sobre o This
Tags: braziliandevs, javascript, webdev, node
Published: 2023-03-24 17:24:20

Eae gente bonita, beleza?

Dessa vez venho falar um pouco sobre a palavra-chave `this` no JavaScript. Ela é comum em diversas linguagens, porém ela pode ser um pouco confusa no JS e aqui vou te explicar o porquê.

## Como funciona o this?

Antes de tudo é importante nós entendermos como o `this` funciona normalmente.

O `this` é uma palavra-chave para se referir aos membros de uma classe (métodos e propriedades). E é usado em outras linguagens de programação como o Java, por exemplo. 

Exemplo de uso do this em java

```java

class Pessoa {
  String nome;
  int idade;
  public Pessoa(String nome, int idade) {
    this.nome = nome;
    this.idade = idade;
  }
  
  int getIdade() {
    return this.idade;
  }


  String getNome() {
    return this.nome;
  }

  public void falarNome() {
    System.out.println("Meu nome é: "+ this.getNome());
  }

  public void falarNomeEIdade() {
    System.out.println("Meu nome é: "+ this.getNome()+ " e tenho "+ this.idade+ " anos...");
  }
}

class Main {
  public static void main(String[] args) {
    Pessoa p1 = new Pessoa("Cristian", 24);
    p1.falarNome();
    p1.falarNomeEIdade();
  }
}
``` 
Nesse exemplo o `this` é usado para referenciar as propriedades `nome` e `idade` e também os métodos `falarNome` e `falarNomeEIdade`, ou seja, tudo que está no escopo da classe (guarde isso, ok?).

## O problema no JS

No JavaScript temos dois tipos de funções, certo? As declaradas com a palavra-chave `function` e as arrows function `() => {}`. É importante você saber aqui que as arrow functions não tem um escopo próprio, então quando você usa o `this` você acaba pegando as propriedades e métodos do escopo anterior. Então é importante você sempre se atentar nos momentos que você vai usar o `this`. 

Também existe o tema contexto por trás do `this` no JS, em breve venho aqui e explico para vocês.

Se chegou até aqui, me segue la nas [redes vizinhas.]  (https://bento.me/cmsdev)
<img src="https://media.giphy.com/media/uWlpPGquhGZNFzY90z/giphy.gif" />
Mimo
Tags: beginners, webdev, programming, python
Published: 2023-03-24 17:21:41

## **Did anybody try mimo before?**
I´ve been using mimo for about 1,5- 2 months and I love it. This app got me into coding in the first place and teaches you the very basics - advanced level. You can learn a good amount of programming languages and it is really easy and fun to use. This is btw not an advertisement for this app, but I would definitely recommend it for beginners or even pros.

You can find this app on the app store and google play and just download it on any mobile device.
It´s also very playful, you can rank up in leagues by  completing lessons. The interface looks a bit like Duolingo and the system is pretty similar, but the learning effect is definitely very good. 

After completing some of the courses in the app, you can also get certificates to download, if you get the full version. But all the lessons are for free. They also offer a full stack web development bootcamp, which is probably very good. 

11/10 would recommend.
James
Published: 2023-03-24 17:09:57

[https://www.bankfanz.com/first-bank-transfer-code/](https://www.bankfanz.com/first-bank-transfer-code/#utm_source=backlinks&utm_medium=search&utm_campaign=darry+ring+us&utm_content=Michelle)

https://plaza.rakuten.co.jp/firstbankcode001/diary/202303230001/
https://peatix.com/user/16547996/
https://www.provenexpert.com/what-is-firstbank-transfer-code-20237/
https://www.producthunt.com/@firstbanktranfercode7
https://www.divephotoguide.com/user/Firstbanktranfercode7
https://wakelet.com/@Whatisfirstbanktransfercode2023202
https://vocal.media/authors/what-is-firstbank-transfer-code-2023-fd32s00i2
https://www.lifeofpix.com/photographers/firstbanktranfercode7/
https://seedandspark.com/user/what-is-firstbank-transfer-code-2023-5
https://rosalind.info/users/Firstbanktransfercode7/
http://phillipsservices.net/UserProfile/tabid/43/userId/207748/Default.aspx
https://app.roll20.net/users/11770993/what-is-firstbank-transfer-c
https://speakerdeck.com/firstbankcode7
https://social.msdn.microsoft.com/Profile/What%20is%20Firstbank%20transfer%20code%202023%207
https://camp-fire.jp/profile/Firstbanktransfercode7/
https://plazapublica.cdmx.gob.mx/profiles/Firstbankcode7/activity
https://www.metal-archives.com/users/Firstbanktranfercode7
https://storium.com/user/firstbanktransfercode7
https://trabajo.merca20.com/author/firstbanktransfercode7/
https://www.intensedebate.com/people/Firstbankcode7
https://www.mifare.net/support/forum/users/firstbanktranfercode7/
https://pinshape.com/users/2599696-firstbank7
http://foxsheets.com/UserProfile/tabid/57/userId/125376/Default.aspx
https://www.kompasiana.com/firstbankcode7
https://leanin.org/circles/what-is-firstbank-transfer-code-7
https://www.credly.com/users/what-is-firstbank-transfer-code.194eceeb/badges
https://www.myminifactory.com/users/Firstbanktranfercode7
https://www.sqlservercentral.com/forums/user/firstbanktransfercode7
https://www.longisland.com/profile/Firstbanktransfercode7
https://guides.co/a/james-tyson
https://myanimelist.net/profile/Firstbankcode7
Troubleshooting Timezone Issues in PostgreSQL with DBeaver
Tags: postgres, dbeaver, timezone, utc
Published: 2023-03-24 17:04:14

When working with a PostgreSQL database and querying data using a tool like DBeaver, it's not uncommon to run into issues where the **time displayed in DBeaver doesn't match the time stored in the database**. This can be confusing and frustrating, but fortunately, the most likely cause is easy to fix: **the timezone settings in DBeaver**.

PostgreSQL stores dates and times in UTC format by default. This means that if you query a timestamp field in the database, you'll get back a value in UTC time. However, when that value is displayed in DBeaver, it will be adjusted to the timezone settings of your computer, which may not be the same as the server hosting the database.

To fix this, you'll need to adjust the timezone settings in DBeaver to match the timezone of the server. You can do this by going to the "Window", and then selecting the "Preferences" tab. From there, you should see a setting for "User Interface". Set the timezone value to UTCZ, and then save your changes.

Once you've made this adjustment, your queries should return results that match the actual timestamp values stored in the database. Keep in mind, though, that this adjustment only affects DBeaver. If you're using another tool to query the database, or if you're running queries programmatically, you may need to adjust the timezone settings in those tools as well.

It's also worth noting that if you're working with a database that spans multiple timezones, you may need to take additional steps to ensure that your queries return accurate results. For example, you may need to convert timestamps to a consistent timezone before comparing them or aggregating data. However, for most cases, adjusting the timezone settings in DBeaver should be sufficient.

In conclusion, if you're seeing a discrepancy between the time displayed in DBeaver and the time stored in your PostgreSQL database, don't panic. It's likely just a timezone issue, and can be easily fixed by adjusting the serverTimezone setting in DBeaver. With a little bit of configuration, you'll be able to query your database with confidence, knowing that you're working with accurate timestamp values.

#PostgreSQL #DBeaver #timezone #database #timestamp #UTC #serverTimezone #querying #data #configuration #accuracy #datetime #computing #programming
Item delete & Move in SwiftUI
Tags: 100daysofcode, swiftu, swift, ios
Published: 2023-03-24 16:52:57

Swip to delete perticular item from the list we can achive using the onDelete() method

Also we can reorder the item using the onMove() metod

```
import SwiftUI

struct ContentView: View {
    @State private var Names = ["Saurabh","Sachin","Yuraj","Harbhajan","Rohit","Virat","Kapil","Dhoni"]
    var body: some View{
        NavigationView {
            VStack{
                List{
                    ForEach(Names,id: \.self) { name in
                        Text("\(name)")
                    }
                    .onDelete(perform: removeItem)
                    .onMove(perform: moveItem)
                }
                
            }
            .navigationTitle("Delete & Move")
            .toolbar {
                EditButton()
            }
        }
    }
    
    func removeItem(at offsets:IndexSet){
        Names.remove(atOffsets: offsets)
    }
    
    func moveItem(from source:IndexSet,to destination:Int){
        Names.move(fromOffsets: source, toOffset: destination)
    }
}
    
    
    

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

**outPut:**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iox4vx8v3vssyrve6xht.gif)
Life after Boot Camp
Tags: webdev, codenewbie, beginners, life
Published: 2023-03-24 16:43:39

Congratulations on completing your coding boot camp! You've spent numerous hours on your final project and are now in the process of figuring out your next steps with the ultimate goal of landing a job. However, you may find yourself feeling lost and overwhelmed with the plethora of advice on what to do next. Do you start by building a portfolio or focus on fixing bugs in your project? Do you prioritize learning new concepts or mastering the fundamentals? Should you start mass-applying to jobs or first improve your resume? It's easy to feel jumbled and confused when trying to navigate the post-bootcamp phase. After some reflection, I've come up with a game plan that can help you make sense of it all.

**Take a break**
The first thing you should do is take a break. After all the hard work you've put in, you need some time to recharge. Take a few days or a week to rest and disconnect from the critical thinking required during boot camp.

**Create a list of goals**
Once you've rested, it's time to create specific goals and steps to achieve them. Start by identifying a goal, such as fixing a bug in your project, even if you're not sure how to do it yet. Then, break down the goal into smaller steps, such as researching the issue or seeking help from a mentor. Write these steps down and store them somewhere that is easily accessible, I use [Notion](http://notion.com/). 

**Create a schedule**
Now that you have your goals and steps in place, it's time to create a schedule. Decide how much time you want to allocate to each task on a daily or weekly basis. For example, you could spend two hours a day working on LeetCode questions or one hour a day applying to jobs. Alternatively, you could designate specific days of the week to work on certain tasks. It's important to set realistic expectations and stick to the schedule as much as possible.

**Stick to the schedule**
Sticking to the schedule you've created is crucial to building the habits you need to achieve your goals. Adjust the schedule as needed to fit your work flow, but be sure to remain consistent. Even if you don't accomplish everything you set out to do, record your progress and pick up where you left off. As you complete tasks and cross them off your list, you'll gain momentum and see progress.



Navigating life after coding boot camp can be daunting, but with a clear plan in place, you can achieve your goals and find success. Remember to take breaks, create specific goals and steps, and stick to a schedule. With hard work and dedication, you'll be well on your way to landing your dream job. Best of luck!
Mobile UI testing with React Native and Maestro
Tags: reactnative, javascript, mobile, react
Published: 2023-03-24 16:43:36

Hello!

This is a small personal project I mainly created  for fun and to develop my mobile UI testing skills. I would like to share it with you, if you are interested in it.  This project  shows how to make UI testing with React Native (A framework to create native apps for Android and iOS) and Maestro (A mobile UI testing framework).

[React Native Maestro](https://github.com/kiki-le-singe/react-native-maestro)

Thank you in advance for your time and input, and let me know if you have any questions.

I hope it would be helpful for someone :)

Have a good day!

Enjoy it! :)
[AWS] Automation Notify When AWS Public IP Changed
Tags: awspublicipnotify, aws, automation
Published: 2023-12-30 12:32:33

---
title: [AWS] Automation Notify When AWS Public IP Changed
published: true
date: 2023-03-24 16:40:10 UTC
tags: 
- AWSPublicIPNotify
- AWS
- Automation
canonical_url: https://www.kmp.tw/post/automationnotifywhenawspublicipchange/
---

# Situation

### Want Get Notify When AWS CloudFront IP Range Changed

# Solution
## Step 1 Create `SNS Subscription` And Select Protocol

### `Topic ARN` Enter  `arn:aws:sns:us-east-1:806199016981:AmazonIpSpaceChanged`

![notidy01](https://img.kmp.tw/AutomationNotifyWhenAWSPublicIPChange01.png)
### Step 2 Go To Mailbox And Verify Subscription
![notidy02](https://img.kmp.tw/AutomationNotifyWhenAWSPublicIPChange02.png)
### Click `Confirm subscription`

![notidy03](https://img.kmp.tw/AutomationNotifyWhenAWSPublicIPChange03.png)

### If AWS Public IP Changed, You'll Recive Mail Notify Looks Like These
```
{
  "create-time":"yyyy-mm-ddThh:mm:ss+00:00",
  "synctoken":"0123456789",
  "md5":"6a45316e8bc9463c9e926d5d37836d33",
  "url":"https://ip-ranges.amazonaws.com/ip-ranges.json"
}
```

### You Also Can Use SNS Trigger Other Service To Do Something