gptcli VS vite

You must have an account with Open AI. If you don't have one, go here and create one.

For a long time, I was looking for something exciting to work on and this was it. The fact that ChatCraft already supported Speech to Text transcription using Whisper, which is another one of OpenAI's models with unique capabilities, integrating Text-to-Speech would essentially turn our application into something like an Amazon Alexa but with a brain powered the same LLM that ChatGPT uses.

With your API key, you’ll be able to make authenticated HTTP requests to OpenAI. So it’s a good idea to get familiar with the API itself. I’d encourage you to take a brief look through the OpenAI Documentation and become familiar with some concepts. The models are particularly good to understand because they have varying capabilities.

Next, we’ll also need an OpenAI account to have access to their API.

Capable of reasoning:The application can be connected to a large language model like OpenAI, Cohere, or Hugging Face. This enables the application to answer based on the context it is given.

Beyond that, "AI tools" is a pretty broad category. Odds are you're asking about LLMs (perhaps even specifically GPT), in which case a good place to start is with OpenAI and their API. Alternatively, Hugging Face is a good place to find models (not just LLMs, either) and they have tooling to let you interact with them in a consistent way. In these cases, you're not actually developing an AI, per se, but just utilizing it. But when I think of "AI Tools" at this point in time, I'm thinking of tools built on top of LLMs.

Like most things in IT and programming, this imo is also best learned by doing rather than reading a bunch of technical papers. I recommend starting with ChatGPT and testing out varieties of prompts asking it to fill in your knowledge. There are great documentation by both OpenAI and Microsoft Azure on using these models with examples. For open-source models (and transformers in general) HuggingFace is a great resource and you can get started on some smaller models by downloading it and trying right away. Karpathy's nanoGPT video on Youtube is also very useful to get started.

It's just a gui to (most of) what you get through the API. Read the API docs for details of each option: https://platform.openai.com/docs/introduction

For the full list of options, check out the OpenAI API documentation.

If you are interested in an API for ChatGPT in general, you can go look at the documentation or this starter guide for gpt-4 and gpt-3.5-turbo on the openai website. This should then be adapted to the language you are using.

Given our team's collective proficiency within the React ecosystem, we decided to leverage this expertise for our project. Initially, we contemplated utilizing Next.js; however, due to the limited practical experience with this technology among key engineers and the pressing timeline to develop the first prototype, we opted for a Single Page Application(SPA) approach. For bundling, we selected Vite, primarily due to its super fast build times, simplicity of configuration, and potential for a nearly seamless transition to server-side rendering.

We are continuing to add new project templates for various types of projects, and we've recently created one for the infamous combination of React with Vite tooling.

Vite focuses on providing an extremely fast development server and workflow speed in web development. It uses its own ES module imports during development, speeding up the startup time.

Vite and Next.js are both top 5 modern development framework right now. They are both great depending on your use case so we’ll discuss 4 areas: Architecture, main features, developer experience and production readiness. After learning about these we’ll have a better idea of which one is best for your project.

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { port: 3000 }, css: { devSourcemap: true }, resolve: { alias: { '~': path.resolve(__dirname, './src') } } })

I am currently utilizing Vite:

Homepage: https://vitejs.dev/

Without any adding any dependencies you can connect react props to raw css at runtime with nothing but css variables (aka "custom properties"). If you add CSS modules on top you don't have to worry about affecting the global scope so components created in this way can be truly modular and transferrable. I use this with vite.

Little confused as to why it has vite in it‘s name, it seems unrelated to https://vitejs.dev/

it says in their docs that they recommend Vite https://vitejs.dev/

it goes like this.

1. you create a repo folder, you cd into it.

2. you create a client template using vite which can be plain typescript, or uses frameworks such as react or vue, at https://vitejs.dev/guide/

3. you cd in that client directory, you npm install, then you npm run dev, it should show you that it works at localhost:5173

4. you follow the instructions on your url, you do npm install @web3modal/wagmi @wagmi/core @wagmi/connectors viem

5. you follow the further instructions.

> It seems like this is for npm or yarn to pull from a remote repository maintained by @wagmi for instance. But then what?

you install the wagmi modules, then you import them in your js code, those code can run upon being loaded or upon user actions such as button clicks

> Do I just symlink to the node_modules directory somehow? Use browserify? Or these days I'd use webpack or whatever the cool kids are using these days?

no need for those. browserify is old school way of transpiling commonjs modules into browser-compatible modules. webpack is similar. vite replaces both webpack and browserify. vite also uses esbuild and swc under the hood which replaces babel.

> I totally get how node package management works ... for NODE. But all these client-side JS projects these days have docs that are clearly for the client-side but the ES2015 module examples they show seem to leave out all instructions for how to actually get the files there, as if it's obvious.

pretty much similar actually. except on client-side, you have src and dist folders. when you run "npm run build" vite will compile the src dir into dist dir. the outputs are the static files that you can serve with any http server such as npx serve, or caddy, or anything really.

> What gives? And finally, what exactly does "browserify" do these days, since I think Node supports both ES modules and and CJS modules? I also see sometimes UMD universal modules

vite supports both ecmascript modules and commonjs modules. but these days you'll just want to stick with ecmascript which makes your code consistently use import and export syntax, and you get the extra benefit of it working well with your vscode intellisense.

> In short, I'm a bit confused how to use package management properly with browsers in 2024: https://modern-web.dev/guides/going-buildless/es-modules/

if people want plain js there is unpkg.com and esm.sh way, but the vite route is the best for you as it's recommended and tested by the providers of your modules.

> And finally, if you answer this, can you spare a word about typescript? Do we still need to use Babel and Webpack together to transpile it to JS, and minify and tree-shake, or what?

I recommend typescript, as it gives you better type-safety and better intellisense, but it really depends. If you're new to it, it can slow you down at first. But as your project grows you'll eventually see the value of it. In vite there are options to scaffold your project in pure js or ts.