Streaming Demo
++ {response} +
+
- Our first sponsor ever! Thanks so much Michel ❤️ , from the whole Wasp Team, for bravely going where nobody has been before :)!
+ - Our first sponsor ever! Thanks so much, Michel ❤️ , from the whole Wasp Team, for bravely going where nobody has been before :)!
+
+
- Thanks Shayne, for all the contributions you did so far and for your continuous support!
+
+
- Big thanks Mariano for being one of our first sponsors and believing in us ❤️!
+
+
- Thanks Mike ❤️ for supporting us so early on our journey!
+
+
- We are thankful for your support Heaven in this early stage of Wasp :)!
diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 000000000..caa86ce7d
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,37 @@
+Example Wasp apps
+=================
+
+Here's a list of all officially maintained Wasp example apps!
+Most of these apps are relatively small, and each one demonstrates several of Wasp's interesting features.
+
+The **tutorials** directory contains [Wasp tutorial](https://wasp-lang.dev/docs/tutorial/create) apps.
+
+1. **todo-typescript**
+ - A simple task-tracking app implemented in TypeScript.
+ - Demonstrates: **full-stack type safety in Wasp via TypeScript**, [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+2. **waspello**
+ - A simple Trello clone.
+ - Demonstrates: [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+3. **hackaton-submissions**
+ - An app for organizing your own hackaton.
+ - Demonstrates: [tailwind](https://wasp-lang.dev/docs/project/css-frameworks#tailwind), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+4. **waspleau**
+ - A simple clone of Tableau. The app regularly pulls in external data and shows it on a nice dashboard.
+ - Demonstrates: **[jobs](https://wasp-lang.dev/docs/advanced/jobs)**, analytics
+
+5. **thoughts**
+ - A simple note-taking app organized around the concept of hashtags.
+ - Demonstrates: [db seeding](https://wasp-lang.dev/docs/data-model/backends#seeding-the-database), [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+6. **realworld**
+ - A Medium clone (https://github.com/gothinkster/realworld - the mother of all demo apps).
+ - Demonstrates: [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview), [db seeding](https://wasp-lang.dev/docs/data-model/backends#seeding-the-database), Material UI
+
+7. **streaming**
+ - Demonstrates: **http streaming**, [api](https://wasp-lang.dev/docs/advanced/apis)
+
+8. **websockets-realtime-voting**
+ - Demonstrates: **[web sockets](https://wasp-lang.dev/docs/advanced/web-sockets)**, [auth](https://wasp-lang.dev/docs/auth/overview), voting system
diff --git a/examples/hackathon/.gitignore b/examples/hackathon-submissions/.gitignore
similarity index 100%
rename from examples/hackathon/.gitignore
rename to examples/hackathon-submissions/.gitignore
diff --git a/examples/hackathon/.wasproot b/examples/hackathon-submissions/.wasproot
similarity index 100%
rename from examples/hackathon/.wasproot
rename to examples/hackathon-submissions/.wasproot
diff --git a/examples/hackathon/README.md b/examples/hackathon-submissions/README.md
similarity index 100%
rename from examples/hackathon/README.md
rename to examples/hackathon-submissions/README.md
diff --git a/examples/hackathon/main.wasp b/examples/hackathon-submissions/main.wasp
similarity index 95%
rename from examples/hackathon/main.wasp
rename to examples/hackathon-submissions/main.wasp
index 198a0961d..0d74ec0f3 100644
--- a/examples/hackathon/main.wasp
+++ b/examples/hackathon-submissions/main.wasp
@@ -12,7 +12,7 @@ app hackathonBetaSubmissions {
}
entity Submission {=psl
- name String @id @unique
+ name String @id @unique
email String @unique
github String
description String
diff --git a/examples/hackathon/postcss.config.cjs b/examples/hackathon-submissions/postcss.config.cjs
similarity index 100%
rename from examples/hackathon/postcss.config.cjs
rename to examples/hackathon-submissions/postcss.config.cjs
diff --git a/examples/hackathon/src/.waspignore b/examples/hackathon-submissions/src/.waspignore
similarity index 100%
rename from examples/hackathon/src/.waspignore
rename to examples/hackathon-submissions/src/.waspignore
diff --git a/examples/hackathon/src/client/Main.css b/examples/hackathon-submissions/src/client/Main.css
similarity index 100%
rename from examples/hackathon/src/client/Main.css
rename to examples/hackathon-submissions/src/client/Main.css
diff --git a/examples/hackathon/src/client/MainPage.tsx b/examples/hackathon-submissions/src/client/MainPage.tsx
similarity index 100%
rename from examples/hackathon/src/client/MainPage.tsx
rename to examples/hackathon-submissions/src/client/MainPage.tsx
diff --git a/examples/hackathon/src/client/betathonLogo.png b/examples/hackathon-submissions/src/client/betathonLogo.png
similarity index 100%
rename from examples/hackathon/src/client/betathonLogo.png
rename to examples/hackathon-submissions/src/client/betathonLogo.png
diff --git a/examples/hackathon/src/client/components/Navbar.tsx b/examples/hackathon-submissions/src/client/components/Navbar.tsx
similarity index 100%
rename from examples/hackathon/src/client/components/Navbar.tsx
rename to examples/hackathon-submissions/src/client/components/Navbar.tsx
diff --git a/examples/hackathon/src/client/components/Projects.tsx b/examples/hackathon-submissions/src/client/components/Projects.tsx
similarity index 100%
rename from examples/hackathon/src/client/components/Projects.tsx
rename to examples/hackathon-submissions/src/client/components/Projects.tsx
diff --git a/examples/hackathon/src/client/components/SubmissionForm.tsx b/examples/hackathon-submissions/src/client/components/SubmissionForm.tsx
similarity index 100%
rename from examples/hackathon/src/client/components/SubmissionForm.tsx
rename to examples/hackathon-submissions/src/client/components/SubmissionForm.tsx
diff --git a/examples/hackathon/src/client/tsconfig.json b/examples/hackathon-submissions/src/client/tsconfig.json
similarity index 100%
rename from examples/hackathon/src/client/tsconfig.json
rename to examples/hackathon-submissions/src/client/tsconfig.json
diff --git a/examples/hackathon/src/client/vite-env.d.ts b/examples/hackathon-submissions/src/client/vite-env.d.ts
similarity index 100%
rename from examples/hackathon/src/client/vite-env.d.ts
rename to examples/hackathon-submissions/src/client/vite-env.d.ts
diff --git a/examples/hackathon/src/client/waspLogo.png b/examples/hackathon-submissions/src/client/waspLogo.png
similarity index 100%
rename from examples/hackathon/src/client/waspLogo.png
rename to examples/hackathon-submissions/src/client/waspLogo.png
diff --git a/examples/hackathon/src/server/actions.js b/examples/hackathon-submissions/src/server/actions.js
similarity index 100%
rename from examples/hackathon/src/server/actions.js
rename to examples/hackathon-submissions/src/server/actions.js
diff --git a/examples/hackathon/src/server/queries.js b/examples/hackathon-submissions/src/server/queries.js
similarity index 100%
rename from examples/hackathon/src/server/queries.js
rename to examples/hackathon-submissions/src/server/queries.js
diff --git a/examples/hackathon/src/server/tsconfig.json b/examples/hackathon-submissions/src/server/tsconfig.json
similarity index 100%
rename from examples/hackathon/src/server/tsconfig.json
rename to examples/hackathon-submissions/src/server/tsconfig.json
diff --git a/examples/hackathon/src/shared/tsconfig.json b/examples/hackathon-submissions/src/shared/tsconfig.json
similarity index 100%
rename from examples/hackathon/src/shared/tsconfig.json
rename to examples/hackathon-submissions/src/shared/tsconfig.json
diff --git a/examples/hackathon/tailwind.config.cjs b/examples/hackathon-submissions/tailwind.config.cjs
similarity index 100%
rename from examples/hackathon/tailwind.config.cjs
rename to examples/hackathon-submissions/tailwind.config.cjs
diff --git a/examples/streaming/.gitignore b/examples/streaming/.gitignore
new file mode 100644
index 000000000..ad2da72f4
--- /dev/null
+++ b/examples/streaming/.gitignore
@@ -0,0 +1,11 @@
+/.wasp/
+
+# We ignore env files recognized and used by Wasp.
+.env.server
+.env.client
+
+# To be extra safe, we by default ignore any files with `.env` extension in them.
+# If this is too agressive for you, consider allowing specific files with `!` operator,
+# or modify/delete these two lines.
+*.env
+*.env.*
diff --git a/examples/tutorials/ItWaspsOnMyMachine/.wasproot b/examples/streaming/.wasproot
similarity index 100%
rename from examples/tutorials/ItWaspsOnMyMachine/.wasproot
rename to examples/streaming/.wasproot
diff --git a/examples/streaming/main.wasp b/examples/streaming/main.wasp
new file mode 100644
index 000000000..a2c87e63c
--- /dev/null
+++ b/examples/streaming/main.wasp
@@ -0,0 +1,21 @@
+app streaming {
+ wasp: {
+ version: "^0.11.5"
+ },
+ title: "streaming"
+}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+ component: import Main from "@client/MainPage.jsx"
+}
+
+api streamingText {
+ httpRoute: (GET, "/api/streaming-test"),
+ fn: import { getText } from "@server/streaming.js",
+}
+
+apiNamespace defaultMiddleware {
+ path: "/api",
+ middlewareConfigFn: import { getMiddlewareConfig } from "@server/streaming.js",
+}
\ No newline at end of file
diff --git a/examples/tutorials/ItWaspsOnMyMachine/src/.waspignore b/examples/streaming/src/.waspignore
similarity index 100%
rename from examples/tutorials/ItWaspsOnMyMachine/src/.waspignore
rename to examples/streaming/src/.waspignore
diff --git a/examples/streaming/src/client/Main.css b/examples/streaming/src/client/Main.css
new file mode 100644
index 000000000..b6e7ed3f1
--- /dev/null
+++ b/examples/streaming/src/client/Main.css
@@ -0,0 +1,89 @@
+* {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+}
+
+.container {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+main {
+ padding: 5rem 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+main p {
+ font-size: 1.2rem;
+}
+
+.logo {
+ margin-bottom: 2rem;
+}
+
+.logo img {
+ max-height: 200px;
+}
+
+.welcome-title {
+ font-weight: 500;
+}
+
+.welcome-subtitle {
+ font-weight: 400;
+ margin-bottom: 3rem;
+}
+
+.buttons {
+ display: flex;
+ flex-direction: row;
+}
+
+.buttons .button:not(:last-child) {
+ margin-right: 0.5rem;
+}
+
+.button {
+ border-radius: 3px;
+ font-size: 1.2rem;
+ padding: 1rem 2rem;
+ text-align: center;
+ font-weight: 700;
+ text-decoration: none;
+}
+
+.button-filled {
+ border: 2px solid #bf9900;
+ background-color: #bf9900;
+ color: #f4f4f4;
+}
+
+.button-outline {
+ border: 2px solid #8a9cff;
+ color: #8a9cff;
+ background-color: none;
+}
+
+code {
+ border-radius: 5px;
+ padding: 0.2rem;
+ background: #efefef;
+ font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+ Bitstream Vera Sans Mono, Courier New, monospace;
+}
diff --git a/examples/streaming/src/client/MainPage.jsx b/examples/streaming/src/client/MainPage.jsx
new file mode 100644
index 000000000..93a197e63
--- /dev/null
+++ b/examples/streaming/src/client/MainPage.jsx
@@ -0,0 +1,57 @@
+import { useState, useEffect } from "react";
+import config from "@wasp/config";
+import "./Main.css";
+
+const MainPage = () => {
+ const { response } = useTextStream("/api/streaming-test");
+ return (
+ + {response} +
+No tasks yet.
; return ( -Home
++ Cast your vote for one of the options. +
+ )} + {poll && ( +{option.description}
+- { description } -
-- Don't worry, it takes less than 30 minutes to learn. -
-
- Next.js is front-end solution only, focused on static websites. This is some
- longer text so I can see how it behaves.
-
- Maybe I should put here component so I have freedom in formatting, putting URLs, etc?
- This is some test url
-
- For anything not covered here, join - - our Discord - ! -
-
-
-)
-
-const Hero = () => {
- const codeString =
-`app todoApp {
- title: "ToDo App", /* visible in tab */
-
- auth: { /* full-stack auth out-of-the-box */
- userEntity: User,
- externalAuthEntity: SocialLogin,
- methods: {
- usernameAndPassword: {},
- google: {}
- }
- }
-}
-
-route RootRoute { path: "/", to: MainPage }
-page MainPage {
- /* import your React code */
- component: import Main from "@ext/Main.js"
-}`
-
- return (
- - Describe common features via Wasp DSL and write the rest in React, Node.js - and Prisma. -
-
- 
- 
- 
- - { description } -
-
- Given .wasp and .js(x)/.css/..., source files,
- Wasp compiler generates the full source of your web app in
- the target stack - front-end, back-end and deployment.
-
- - See what others are building with Wasp. -
-{data?.app.name}
+Loading...
+- See Waspleau here! | See the code + See Waspleau here! | See the code
We've built a dashboard powered by a job queue using Wasp! @@ -30,7 +30,7 @@ We've built a dashboard powered by a job queue using Wasp! Let’s face it - metrics are all around us. Wouldn’t it be great if there was a quick and easy way to build a nice-looking metrics dashboard from data pulled in by HTTP calls to many different sources, cache the data in-memory, and periodically update it via background jobs? Why yes, yes it would... so we made an example Wasp app called Waspleau that does just that! -Here is what it looks like live: https://waspleau.netlify.app/ There is also a screenshot at the top of this post for those who refrain from clicking on any unknown web links for fear of being **Rickrolled**. Respect. +Here is what it looks like live: https://waspleau-app-client.fly.dev/ There is also a screenshot at the top of this post for those who refrain from clicking on any unknown web links for fear of being **Rickrolled**. Respect. ## “Show me the code” diff --git a/web/blog/2022-09-05-dev-excuses-app-tutrial.md b/web/blog/2022-09-05-dev-excuses-app-tutrial.md index ef3e68b05..a907bf8d5 100644 --- a/web/blog/2022-09-05-dev-excuses-app-tutrial.md +++ b/web/blog/2022-09-05-dev-excuses-app-tutrial.md @@ -23,7 +23,7 @@ We’ll use Michele Gerarduzzi’s [open-source project](https://github.com/mich - Building an app shouldn’t take more than 15 minutes. - Use modern web dev technologies (NodeJS + React) -As a result – we’ll get a simple and fun pet project. You can find the complete codebase [here](https://github.com/wasp-lang/wasp/tree/release/examples/tutorials/ItWaspsOnMyMachine). +As a result – we’ll get a simple and fun pet project. You can find the complete codebase [here](https://github.com/wasp-lang/wasp/tree/590a08bb14284835c9785d416980da61fe9e0db0/examples/tutorials/ItWaspsOnMyMachine).  diff --git a/web/blog/2023-09-17-ai-meme-generator-how-to-use-openai-function-call.md b/web/blog/2023-09-17-ai-meme-generator-how-to-use-openai-function-call.md new file mode 100644 index 000000000..f0fa33be6 --- /dev/null +++ b/web/blog/2023-09-17-ai-meme-generator-how-to-use-openai-function-call.md @@ -0,0 +1,1303 @@ +--- +title: "Build your own AI Meme Generator & learn how to use OpenAI's function calls" +authors: [vinny] +image: /img/memerator-banner-tall.gif +tags: [ai, meme, openai, function calling, react, full-stack, generate] +--- + +## Table of Contents + +- [TL;DR](#tldr) +- [Intro](#intro) + - [Call Me, Maybe](#intro) + - [Let's Build](#lets-build) +- [Part 1](#config) + - [Configuration](#config) + - [Project Set Up](#setup) + - [Database Set up](#db) + - [Environment Variables](#env) + - [Start Your App](#start) + - [Generating Memes](#generate-meme) + - [Server-Side Code](#generate-server) + - [Client-Side Code](#generate-client) +- [Part 2](#part-two) + - [Fetching & Updating Templates w/ Cron Jobs](#templates) + - [Defining our Daily Cron Job](#cron) + - [Testing](#cron-test) + - [Editing Memes](#edit) + - [Server-Side Code](#server) + - [Client-Side Code](#client) + - [Deleting Memes](#delete) +- [Conclusion](#conclusion) + + +# TL;DR + +In this two-part tutorial, we’re going to build a full-stack instant Meme Generator app using: + +- React & NodeJS w/ TypeScript +- OpenAI’s [Function Calling API](https://platform.openai.com/docs/guides/gpt/function-calling) +- ImgFlip.com’s [meme creator API](https://imgflip.com/api) + + + +You check out a deployed version of the app we’re going to build here: [The Memerator](https://damemerator.netlify.app) + +If you just want to see the code for the finished app, check out the [Memerator’s GitHub Repo](https://github.com/vincanger/memerator) + + +# Intro + +## Call Me, Maybe + +With [OpenAI’s chat completions API](https://platform.openai.com/docs/guides/gpt), developers are now able to do some really cool stuff. It basically enables ChatGPT functionality, but in the form of a callable API you can integrate into any app. + +But when working with the API, a lot of devs wanted GPT to give back data in a format, like JSON, that they could use in their app’s functions. + +Unfortunately, if you asked ChatGPT to return the data in a certain format, it wouldn’t always get it right. Which is why [OpenAI released function calling](https://platform.openai.com/docs/guides/gpt/function-calling). + +As they describe it, function calling allows devs to “… describe functions to GPT, and have the model intelligently choose to output a JSON object containing arguments to call those functions.” + +This is a great way to turn natural language into an API call. + +So what better way to learn how to use GPT’s function calling feature than to use it to call [Imgflip.com’s meme creator API](https://imgflip.com/api)!? + + + + +## Let’s Build + +In this two-part tutorial, we’re going to build a full-stack React/NodeJS app with: + +- Authentication +- Meme generation via OpenAI’s function calling and ImgFlip.com’s API +- Daily cron job to fetch new meme templates +- Meme editing and deleting +- and more! + + + +I already deployed a working version of this app that you can try out here: [https://damemerator.netlify.app](https://damemerator.netlify.app) — so give it a go and let’s get… going. + +In Part 1 of this tutorial, we will get the app set up and generating and displaying memes. + +In Part 2, we will add more functionality, like recurring cron jobs to fetch more meme templates, and the ability to edit and delete memes. + +BTW, two quick tips: + +1. if you need to reference the app’s finished code at any time to help you with this tutorial, you can check out the app’s [GitHub Repo here](https://github.com/vincanger/memerator). +2. if you have any questions, feel free to hop into the [Wasp Discord Server](https://discord.gg/rzdnErX) and ask us! + +# Part 1 + + + +## Configuration + +We’re going to make this a full-stack React/NodeJS web app so we need to get that set up first. But don’t worry, it won’t take long AT ALL, because we will be using [Wasp](https://wasp-lang.dev) as the framework. + +Wasp does all the heavy lifting for us. You’ll see what I mean in a second. + + + +### Set up your Wasp project + +First, install Wasp by running this in your terminal: + +```bash +curl -sSLStart generating meme ideas by providing topics and intended audience.
+ + + {!!memes && memes.length > 0 ? ( + memes.map((memeIdea) => ( +