diff --git a/darkdeco/.eslintrc.json b/darkdeco/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/darkdeco/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/darkdeco/.gitignore b/darkdeco/.gitignore new file mode 100644 index 0000000..5eb489d --- /dev/null +++ b/darkdeco/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# env files +.env*.local +.env + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/darkdeco/README.md b/darkdeco/README.md new file mode 100644 index 0000000..ea1f5f6 --- /dev/null +++ b/darkdeco/README.md @@ -0,0 +1,60 @@ +# DarkDeco + +[Try out](https://darkdeco.octo.ai/) DarkDeco for yourself! + +DarkDeco demo in Next.js + TypeScript. + +Demos utilize our [demo design system](https://github.com/octoml/demo-design-system) that is easy to swap out for your own styling. + +## Tech stack + +Our demo tech stack includes + +- [Next.js](https://nextjs.org/) +- [TypeScript](https://www.typescriptlang.org/) +- [OctoAI Typescript SDK](https://www.npmjs.com/package/@octoai/client) + +## Getting Started + +Clone the repo + +```bash +git clone https://github.com/octoml/octoai-apps.git + +``` + +Navigate to the demo you want to use + +```bash +cd octoai-apps/darkdeco +``` + +## Add OctoAI token to `.env` + +Create an [OctoAI token](https://octo.ai/docs/getting-started/how-to-create-an-octoai-access-token) if you don't already have one. + +Create a `.env` file in the folder you are working in (`octoai-apps/darkdeco`) and add your token: + +```bash +OCTOAI_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX +``` + +## Developing + +Install dependencies + +```bash +yarn +``` + +Start the dev server + +```bash +yarn dev +``` + +## Deploying + +[Deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Foctoml%2Foctoai-apps%2Ftree%2Fmain%2Fsmartflakes&env=OCTOAI_TOKEN&envDescription=Create%20an%20OctoAI%20token%20if%20you%20don't%20already%20have%20one.&envLink=https%3A%2F%2Focto.ai%2Fdocs%2Fgetting-started%2Fhow-to-create-an-octoai-access-token&project-name=my-darkdeco-app&repository-name=my-darkdeco-app) + +The easiest way to deploy is by using [Vercel](https://vercel.com/docs/frameworks/nextjs), but you can use [any host](https://nextjs.org/docs/app/building-your-application/deploying#self-hosting) that supports Node.js. diff --git a/darkdeco/next.config.js b/darkdeco/next.config.js new file mode 100644 index 0000000..767719f --- /dev/null +++ b/darkdeco/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {} + +module.exports = nextConfig diff --git a/darkdeco/package.json b/darkdeco/package.json new file mode 100644 index 0000000..f6d6ff0 --- /dev/null +++ b/darkdeco/package.json @@ -0,0 +1,27 @@ +{ + "name": "@octoai-apps/darkdeco", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@octoai/demo-design-system": "*", + "@octoai/client": "^0.4.1", + "next": "14.0.4", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.0.4", + "typescript": "^5" + }, + "license": "MIT" +} diff --git a/darkdeco/public/fonts/Lexend-ExtraBold.woff b/darkdeco/public/fonts/Lexend-ExtraBold.woff new file mode 100644 index 0000000..9b6d0bf Binary files /dev/null and b/darkdeco/public/fonts/Lexend-ExtraBold.woff differ diff --git a/darkdeco/public/fonts/Lexend-ExtraBold.woff2 b/darkdeco/public/fonts/Lexend-ExtraBold.woff2 new file mode 100644 index 0000000..329dee4 Binary files /dev/null and b/darkdeco/public/fonts/Lexend-ExtraBold.woff2 differ diff --git a/darkdeco/public/fonts/Lexend-Medium.woff b/darkdeco/public/fonts/Lexend-Medium.woff new file mode 100644 index 0000000..0207236 Binary files /dev/null and b/darkdeco/public/fonts/Lexend-Medium.woff differ diff --git a/darkdeco/public/fonts/Lexend-Medium.woff2 b/darkdeco/public/fonts/Lexend-Medium.woff2 new file mode 100644 index 0000000..76e3d4b Binary files /dev/null and b/darkdeco/public/fonts/Lexend-Medium.woff2 differ diff --git a/darkdeco/public/fonts/Lexend-Regular.woff b/darkdeco/public/fonts/Lexend-Regular.woff new file mode 100644 index 0000000..80a5f9a Binary files /dev/null and b/darkdeco/public/fonts/Lexend-Regular.woff differ diff --git a/darkdeco/public/fonts/Lexend-Regular.woff2 b/darkdeco/public/fonts/Lexend-Regular.woff2 new file mode 100644 index 0000000..8e50031 Binary files /dev/null and b/darkdeco/public/fonts/Lexend-Regular.woff2 differ diff --git a/darkdeco/public/fonts/Lexend-SemiBold.woff b/darkdeco/public/fonts/Lexend-SemiBold.woff new file mode 100644 index 0000000..82a9274 Binary files /dev/null and b/darkdeco/public/fonts/Lexend-SemiBold.woff differ diff --git a/darkdeco/public/fonts/Lexend-SemiBold.woff2 b/darkdeco/public/fonts/Lexend-SemiBold.woff2 new file mode 100644 index 0000000..8da3191 Binary files /dev/null and b/darkdeco/public/fonts/Lexend-SemiBold.woff2 differ diff --git a/darkdeco/public/icons/github.svg b/darkdeco/public/icons/github.svg new file mode 100644 index 0000000..0dcb4be --- /dev/null +++ b/darkdeco/public/icons/github.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/darkdeco/public/icons/octo.svg b/darkdeco/public/icons/octo.svg new file mode 100644 index 0000000..67a9757 --- /dev/null +++ b/darkdeco/public/icons/octo.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/darkdeco/public/icons/vercel.svg b/darkdeco/public/icons/vercel.svg new file mode 100644 index 0000000..08de728 --- /dev/null +++ b/darkdeco/public/icons/vercel.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/darkdeco/public/images/car-building.jpg b/darkdeco/public/images/car-building.jpg new file mode 100644 index 0000000..65d7ba9 Binary files /dev/null and b/darkdeco/public/images/car-building.jpg differ diff --git a/darkdeco/public/images/social-share.png b/darkdeco/public/images/social-share.png new file mode 100644 index 0000000..034623b Binary files /dev/null and b/darkdeco/public/images/social-share.png differ diff --git a/darkdeco/src/app/api/generate/route.ts b/darkdeco/src/app/api/generate/route.ts new file mode 100644 index 0000000..2ae8376 --- /dev/null +++ b/darkdeco/src/app/api/generate/route.ts @@ -0,0 +1,46 @@ +import { Client } from "@octoai/client"; +import { NextRequest } from "next/server"; + +// Pass OctoAI Token into the client for authorization +const client = new Client(process.env.OCTOAI_TOKEN); + +export async function POST(request: NextRequest) { + try { + const data = await request.json(); + + const inferenceData = await client.inferAsync( + "https://image.octoai.run/generate/sdxl", + { + // I misspelled 'stippling' as 'stipping' but it works better + prompt: `${data.prompt} dimensional, with light stipping at night, in dark deco style`, + negative_prompt: + "Blurry, distortion, low-res, poor quality, day, sunlight", + style_preset: "base", + checkpoint: "octoai:lcm_sdxl", + sampler: "LCM", + loras: { asset_01hq3vjh1pffjtqhwzqwzzr44a: 1 }, + steps: 30, + cfg_scale: 2, + width: 1024, + height: 1024, + } + ); + + // Check if `inferenceData` is ready + let ready = await client.isFutureReady(inferenceData); + + // If `inferenceData` is not ready, keep trying endpoint until it is + while (!ready) { + ready = await client.isFutureReady(inferenceData); + await new Promise((resolve) => setTimeout(resolve, 1000)); + } + + // Once `inferenceData` is resolved, send back to client + const inferenceOutput = await client.getFutureResult(inferenceData); + + return Response.json({ ...inferenceOutput }); + } catch (error) { + console.error(`Error generating image: ${error}`); + return Response.error(); + } +} diff --git a/darkdeco/src/app/icon.png b/darkdeco/src/app/icon.png new file mode 100644 index 0000000..8688111 Binary files /dev/null and b/darkdeco/src/app/icon.png differ diff --git a/darkdeco/src/app/layout.tsx b/darkdeco/src/app/layout.tsx new file mode 100644 index 0000000..5f1e04d --- /dev/null +++ b/darkdeco/src/app/layout.tsx @@ -0,0 +1,39 @@ +import type { Metadata } from "next"; +import "@octoai/demo-design-system/dist/styles.css"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +const siteTitle = "DarkDeco | Powered by OctoAI"; +const siteDescription = "Create your own dark deco image"; +const socialShare = "/images/social-share.png"; + +export const metadata: Metadata = { + title: siteTitle, + openGraph: { + title: siteTitle, + description: siteDescription, + images: [{ url: socialShare }], + }, + twitter: { + card: "summary_large_image", + title: siteTitle, + description: siteDescription, + images: [socialShare], + }, +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + +
+ {children} +