├── .env.example ├── .gitignore ├── README.md ├── assets └── buildspace-logo.png ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── index.js └── styles.css └── public ├── favicon.ico └── vercel.svg /.env.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | .env -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # buildspace 2 | ### Welcome 👋 3 | This is the starter template for the [build your own AI writing assistant w/ GPT-3](https://buildspace.so/builds/ai-writer) project. 4 | -------------------------------------------------------------------------------- /assets/buildspace-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buildspace/gpt3-writer-starter/5b418b28ae7cb18d69c06a50f3c926e2a00cab2b/assets/buildspace-logo.png -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scratchpad", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "^11.10.5", 13 | "@emotion/styled": "^11.10.5", 14 | "eslint": "8.27.0", 15 | "eslint-config-next": "13.0.3", 16 | "framer-motion": "^6.5.1", 17 | "next": "13.0.3", 18 | "openai": "^3.1.0", 19 | "react": "18.2.0", 20 | "react-dom": "18.2.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import './styles.css'; 2 | 3 | function App({ Component, pageProps }) { 4 | return 5 | } 6 | export default App; 7 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head'; 2 | import Image from 'next/image'; 3 | import buildspaceLogo from '../assets/buildspace-logo.png'; 4 | 5 | const Home = () => { 6 | return ( 7 |
8 | 9 | GPT-3 Writer | buildspace 10 | 11 |
12 |
13 |
14 |

sup, insert your headline here

15 |
16 |
17 |

insert your subtitle here

18 |
19 |
20 |
21 |
22 | 27 |
28 | buildspace logo 29 |

build with buildspace

30 |
31 | 32 |
33 |
34 | ); 35 | }; 36 | 37 | export default Home; 38 | -------------------------------------------------------------------------------- /pages/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&display=swap'); 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Manrope', sans-serif; 7 | } 8 | 9 | .root { 10 | display: flex; 11 | place-content: center flex-start; 12 | align-items: center; 13 | background-color: rgb(0, 0, 0); 14 | flex-flow: column nowrap; 15 | gap: 10px; 16 | height: 100vh; 17 | overflow: auto; 18 | padding: 0px; 19 | position: relative; 20 | } 21 | 22 | .container { 23 | display: flex; 24 | place-content: center flex-start; 25 | align-items: center; 26 | flex: 0 0 auto; 27 | flex-flow: column nowrap; 28 | gap: 10px; 29 | height: fit-content; 30 | max-width: 975px; 31 | overflow: auto; 32 | padding: 50px; 33 | position: relative; 34 | width: auto; 35 | gap: 64px; 36 | } 37 | 38 | .header { 39 | display: flex; 40 | flex-direction: column; 41 | width: 100%; 42 | align-items: center; 43 | color: #FFF 44 | } 45 | 46 | .header-title { 47 | display: flex; 48 | gap: 12px; 49 | } 50 | 51 | .header-title h1 { 52 | width: 100%; 53 | font-weight: 700; 54 | font-size: 72px; 55 | letter-spacing: -4px; 56 | line-height: 1.2em; 57 | text-align: center; 58 | margin: 0; 59 | } 60 | 61 | .header-subtitle h2 { 62 | font-size: 20px; 63 | font-style: normal; 64 | font-weight: 400; 65 | line-height: 1.4em; 66 | color: rgba(255, 255, 255, 0.75); 67 | } 68 | 69 | .prompt-container { 70 | place-content: flex-end center; 71 | align-items: center; 72 | display: flex; 73 | flex: 0 0 auto; 74 | flex-flow: column nowrap; 75 | gap: 16px; 76 | height: min-content; 77 | padding: 0px; 78 | width: min-content; 79 | } 80 | 81 | .prompt-box { 82 | border-bottom-width: 1px; 83 | border-color: rgba(255, 255, 255, 0.1); 84 | border-left-width: 1px; 85 | border-right-width: 1px; 86 | border-style: solid; 87 | border-top-width: 1px; 88 | place-content: flex-start; 89 | align-items: flex-start; 90 | background-color: rgba(255, 255, 255, 0.05); 91 | border-radius: 16px; 92 | display: flex; 93 | flex: 0 0 auto; 94 | flex-flow: column nowrap; 95 | gap: 10px; 96 | height: 150px; 97 | overflow: hidden; 98 | padding: 20px; 99 | position: relative; 100 | width: 610px; 101 | max-width: 1200px; 102 | will-change: transform; 103 | overflow: auto; 104 | outline: none; 105 | resize: none; 106 | font-size: 16px; 107 | font-style: normal; 108 | letter-spacing: 0px; 109 | line-height: 1.6em; 110 | text-align: start; 111 | color: rgba(255, 255, 255, 0.75); 112 | text-decoration: none; 113 | text-transform: none; 114 | } 115 | 116 | textarea { 117 | font-family: 'Manrope', sans-serif; 118 | } 119 | 120 | 121 | .prompt-box:focus { 122 | border-color:rgba(255, 255, 255, 0.75) 123 | } 124 | 125 | 126 | .prompt-buttons { 127 | display: flex; 128 | place-content: center; 129 | align-items: center; 130 | justify-content: flex-end; 131 | flex: 0 0 auto; 132 | flex-flow: row nowrap; 133 | gap: 12px; 134 | height: min-content; 135 | overflow: hidden; 136 | padding: 0px; 137 | position: relative; 138 | width: 100%; 139 | } 140 | 141 | .key-stroke { 142 | outline: none; 143 | display: flex; 144 | flex-direction: column; 145 | justify-content: flex-start; 146 | flex-shrink: 0; 147 | transform: none; 148 | } 149 | 150 | .key-stroke p { 151 | color: rgba(255, 255, 255, 0.75); 152 | flex: 0 0 auto; 153 | height: auto; 154 | position: relative; 155 | white-space: pre; 156 | width: auto; 157 | } 158 | 159 | .or { 160 | outline: none; 161 | display: flex; 162 | flex-direction: column; 163 | justify-content: flex-start; 164 | flex-shrink: 0; 165 | transform: none; 166 | } 167 | 168 | .or p { 169 | color: rgba(255, 255, 255, 0.25) 170 | } 171 | 172 | .generate-button { 173 | place-content: flex-start; 174 | align-items: flex-start; 175 | background-color: rgb(255, 79, 18); 176 | border-radius: 100px; 177 | display: flex; 178 | flex: 0 0 auto; 179 | flex-flow: column nowrap; 180 | gap: 10px; 181 | height: min-content; 182 | overflow: hidden; 183 | padding: 16px 24px; 184 | position: relative; 185 | text-decoration: none; 186 | width: min-content; 187 | will-change: transform; 188 | cursor: pointer; 189 | } 190 | 191 | .generate { 192 | outline: none; 193 | display: flex; 194 | flex-direction: column; 195 | justify-content: flex-start; 196 | flex-shrink: 0; 197 | transform: none; 198 | } 199 | 200 | .generate p { 201 | color: rgb(255, 255, 255); 202 | margin: 0; 203 | } 204 | 205 | .loading { 206 | opacity: 0.7; 207 | cursor: default; 208 | } 209 | 210 | .badge-container { 211 | display: flex; 212 | bottom: 20px; 213 | flex: 0 0 auto; 214 | height: auto; 215 | left: 20px; 216 | position: fixed; 217 | width: auto; 218 | z-index: 1; 219 | } 220 | 221 | .badge-container a { 222 | border-bottom-width: 1px; 223 | border-color: rgba(255, 255, 255, 0.1); 224 | border-left-width: 1px; 225 | border-right-width: 1px; 226 | border-style: solid; 227 | border-top-width: 1px; 228 | background-color: rgb(0, 0, 0); 229 | border-radius: 54.3478% / 238.095%; 230 | filter: grayscale(1); 231 | transform: none; 232 | transform-origin: 50% 50% 0px; 233 | font-size: 14px; 234 | font-weight: 700; 235 | letter-spacing: -0.5px; 236 | line-height: 1em; 237 | color: #fff; 238 | padding: 12px; 239 | text-decoration: none; 240 | } 241 | 242 | .badge { 243 | display: flex; 244 | align-items: center; 245 | } 246 | 247 | .badge img { 248 | width: 21px; 249 | height: 17px; 250 | image-rendering: pixelated; 251 | flex-shrink: 0; 252 | fill: black; 253 | color: black; 254 | transform: none; 255 | transform-origin: 50% 50% 0px; 256 | padding-right: 5px; 257 | } 258 | 259 | .badge p { 260 | margin: 0; 261 | } 262 | 263 | .grow { 264 | transition: all .2s ease-in-out; 265 | } 266 | 267 | .grow:hover { 268 | transform: scale(1.1); 269 | } 270 | 271 | .output { 272 | place-content: center flex-start; 273 | align-items: center; 274 | display: flex; 275 | flex: 0 0 auto; 276 | flex-flow: column nowrap; 277 | gap: 10px; 278 | height: min-content; 279 | max-width: 1200px; 280 | overflow: hidden; 281 | position: relative; 282 | width: 100%; 283 | } 284 | 285 | .output-header-container { 286 | place-content: center; 287 | align-items: center; 288 | display: flex; 289 | flex: 0 0 auto; 290 | flex-flow: column nowrap; 291 | gap: 16px; 292 | height: min-content; 293 | overflow: hidden; 294 | padding: 0px; 295 | position: relative; 296 | width: 100%; 297 | } 298 | 299 | .output-header h3 { 300 | font-family: "Manrope", serif; 301 | font-size: 28px; 302 | font-style: normal; 303 | font-weight: 800; 304 | letter-spacing: 0px; 305 | line-height: 1.4em; 306 | text-align: start; 307 | color: #ffffff; 308 | text-decoration: none; 309 | text-transform: none; 310 | margin: 0; 311 | } 312 | 313 | .output-content { 314 | outline: none; 315 | display: flex; 316 | /* max-width: 25%; */ 317 | flex-direction: column; 318 | justify-content: flex-start; 319 | flex-shrink: 0; 320 | transform: none; 321 | } 322 | 323 | .output-content p { 324 | text-align: center; 325 | white-space: pre-line; 326 | color: rgba(255, 255, 255, 0.5); 327 | } 328 | 329 | @media (min-width: 810px) and (max-width: 1199px) { 330 | .container { 331 | max-width: 600px; 332 | width: 100%; 333 | } 334 | 335 | .prompt-container { 336 | max-width: 600px; 337 | width: 100%; 338 | } 339 | 340 | .prompt-box { 341 | width: 100%; 342 | } 343 | } 344 | 345 | @media (max-width: 809px) { 346 | .container { 347 | max-width: 500px; 348 | width: 100%; 349 | } 350 | 351 | .prompt-container { 352 | max-width: 500px; 353 | width: 100%; 354 | } 355 | 356 | .prompt-box { 357 | width: 100%; 358 | } 359 | } 360 | 361 | @media (max-width: 600px) { 362 | .container { 363 | max-width: 400px; 364 | width: 100%; 365 | } 366 | 367 | .header-title h1 { 368 | font-size: 50px; 369 | } 370 | 371 | .header-subtitle h2 { 372 | text-align: center; 373 | } 374 | 375 | .key-stroke, .or { 376 | display: none; 377 | } 378 | 379 | .prompt-buttons { 380 | justify-content: center; 381 | } 382 | 383 | .prompt-container { 384 | max-width: 400px; 385 | width: 100%; 386 | } 387 | 388 | .prompt-box { 389 | width: 100%; 390 | } 391 | } 392 | 393 | 394 | 395 | /* Loading ring animation */ 396 | .loader { 397 | width: 18px; 398 | height: 18px; 399 | border-radius: 50%; 400 | display: inline-block; 401 | border-top: 2px solid #FFF; 402 | border-right: 2px solid transparent; 403 | box-sizing: border-box; 404 | animation: rotation 1s linear infinite; 405 | } 406 | 407 | @keyframes rotation { 408 | 0% { 409 | transform: rotate(0deg); 410 | } 411 | 412 | 100% { 413 | transform: rotate(360deg); 414 | } 415 | } 416 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buildspace/gpt3-writer-starter/5b418b28ae7cb18d69c06a50f3c926e2a00cab2b/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | --------------------------------------------------------------------------------