---
================================================
FILE: README_CN.md
================================================
---
================================================
FILE: app/api/chat/route.ts
================================================
import {
streamObject,
LanguageModel,
CoreMessage,
} from 'ai'
import { createGoogleGenerativeAI } from '@ai-sdk/google';
import {htmlTemplate} from '@/lib/template'
import ratelimit from '@/lib/ratelimit'
import { artifactSchema } from '@/lib/schema'
export type LLMModel = {
id: string
name: string
provider: string
providerId: string
}
export type LLMModelConfig = {
model?: string
apiKey?: string
baseURL?: string
temperature?: number
topP?: number
topK?: number
frequencyPenalty?: number
presencePenalty?: number
maxTokens?: number
}
interface Req {
messages: CoreMessage[],
userID: string,
}
export async function POST(req: Request) {
const { messages } = await req.json() as Req
const client = createGoogleGenerativeAI({ apiKey: process.env.GEMINI_API_KEY})('models/gemini-1.5-flash-latest')
const stream = await streamObject({
model: client as LanguageModel,
schema: artifactSchema,
system: `
Generate a visually appealing reveal.js presentation in HTML.
The presentation should include the following slides: appealing cover, bullet points with links, conclusion and end page.
more than 6 slides.
use the template: ${htmlTemplate}
`,
messages
})
return stream.toTextStreamResponse()
}
================================================
FILE: app/api/convertd/route.ts
================================================
import { supabase } from '@/lib/supabase';
async function uploadFileContent(fileContent: string, fileName: string) {
const { data, error } = await supabase.storage
.from('ppt')
.upload(`public/${fileName}`, fileContent, {
contentType: 'text/html',
})
if (error) {
console.error('covert file failed', error)
return null
}
const { publicUrl } = supabase.storage.from('ppt').getPublicUrl(data.path).data
return publicUrl
}
export async function POST(req: Request) {
const { artifact} = await req.json()
const url = await uploadFileContent(artifact.code, `ppt_${Date.now()}.html`)
if (!url) {
return new Response('upload ppt html failed.', {
status: 403
})
}
// Send file URL back to client
return new Response(JSON.stringify({
url
}))
}
================================================
FILE: app/api/limit/route.ts
================================================
import ratelimit from '@/lib/ratelimit'
export const maxDuration = 60
const rateLimitMaxRequests = 10
const ratelimitWindow = '1d'
export async function GET(req: Request) {
const limit = await ratelimit(req.headers.get('x-forwarded-for'), rateLimitMaxRequests, ratelimitWindow)
if (limit && !limit?.success) {
return new Response('You have reached your request limit for the day.', {
status: 429,
headers: {
'X-RateLimit-Limit': limit.amount.toString(),
'X-RateLimit-Remaining': limit.remaining.toString(),
'X-RateLimit-Reset': limit.reset.toString()
}
})
}
return new Response(JSON.stringify(limit))
}
================================================
FILE: app/globals.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 240, 6%, 10%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240, 5%, 13%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 270, 2%, 19%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--radius: 0.5rem;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
================================================
FILE: app/layout.tsx
================================================
import type { Metadata } from "next";
import "./globals.css";
import { Inter } from 'next/font/google'
import { PostHogProvider } from './provider'
import { ToastContainer } from "react-toastify";
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: "AI RevealJS",
description: "Generate RevealJS PPT by AI",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{content.text}
} if (content.type === 'image') { return
{content}
);
}
================================================
FILE: components/navbar.tsx
================================================
import Link from 'next/link'
import Image from 'next/image'
import { Separator } from '@/components/ui/separator'
import { Button } from './ui/button'
import { Session } from '@supabase/supabase-js'
import { User } from '@/components/user'
import { BsGithub, BsTwitterX } from "react-icons/bs";
interface NavBarProps {
session: Session | null,
showLogin: () => void,
signOut: () => void,
showPrice: () => void
}
export default function NavBar({session, signOut, showLogin, showPrice}: NavBarProps) {
return (
)
}
================================================
FILE: components/price-dialog.tsx
================================================
import {
Dialog,
DialogContent,
DialogTitle,
} from "@/components/ui/dialog"
import Price from "./price"
export function PriceDialog({ open, setOpen }: { open: boolean, setOpen: (open: boolean) => void}) {
return (
)
}
================================================
FILE: components/price.tsx
================================================
import React, { useState } from 'react';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Check, X } from 'lucide-react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
export interface Plan {
name: string
description: string
price: number
credits: number
features: {
name: string
included: boolean
}[]
}
const PricingPlans = () => {
const [isYearly, setIsYearly] = useState(false);
const [loading, setLoading] = useState(false);
const plans: Plan[] = [
{
name: "Free",
description: "No credit card needed",
price: 0,
credits: 20,
features: [
{ name: "20 credits per month", included: true },
{ name: "1 task waiting in queue", included: true },
{ name: "Limited queue priority", included: true },
{ name: "Assets are under CC BY 4.0 license", included: true },
],
},
{
name: "Pro",
description: "Best for individual creators",
price: 20,
credits: 100,
features: [
{ name: "1,000 credits per month", included: true },
{ name: "10 tasks waiting in queue", included: true },
{ name: "Standard queue priority", included: true },
{ name: "Assets are private & customer owned", included: true },
],
},
];
const handleSubscribe = async (plan: Plan) => {
try {
if (!process.env.STRIPE_PRIVATE_KEY) {
console.error('xxxxxx')
toast("👷 Feature Coming Soon....");
return
}
setLoading(true);
const response = await fetch("/api/stripe", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(plan),
});
const { message, data } = await response.json();
if (!data) {
setLoading(false);
toast.error(message);
return;
}
} catch (e) {
setLoading(false);
toast.error("checkout failed");
}
};
return (
{plan.description}
${isYearly ? plan.price * 12 * 0.8 : plan.price}/{isYearly ? 'year' : 'month'}
{plan.credits &&${(plan.price / plan.credits).toFixed(2)} / 100 credits
}Type the Topic for your Presentation, It is Free!
Get started with an example: