├── .eslintrc.json ├── public ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── images │ ├── logo.png │ ├── og-image.png │ ├── cloning-og.png │ └── studio-og.png ├── apple-touch-icon.png ├── screenshots │ └── home.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png └── manifest.json ├── postcss.config.js ├── app ├── verify-email │ └── page.tsx ├── reset-password │ └── page.tsx ├── forgot-password │ └── page.tsx ├── auth │ ├── login │ │ └── page.tsx │ └── resend-verification │ │ └── page.tsx ├── api │ ├── auth │ │ ├── verify-email │ │ │ └── route.ts │ │ ├── forgot-password │ │ │ └── route.ts │ │ ├── resend-verification │ │ │ └── route.ts │ │ ├── login │ │ │ └── route.ts │ │ ├── reset-password │ │ │ └── route.ts │ │ ├── register │ │ │ └── route.ts │ │ └── [...nextauth] │ │ │ └── route.ts │ ├── user │ │ ├── update-clones │ │ │ └── route.ts │ │ └── update-quota │ │ │ └── route.ts │ ├── test-email │ │ └── route.ts │ ├── create-checkout-session │ │ └── route.ts │ ├── voice │ │ └── cloned-voices │ │ │ └── route.ts │ └── speech │ │ └── route.ts ├── app │ └── layout.tsx ├── cloning │ └── layout.tsx ├── globals.css └── components │ └── forgot-password-form.tsx ├── prisma ├── migrations │ └── migration_lock.toml └── schema.prisma ├── lib ├── i18n │ ├── index.ts │ ├── translations │ │ ├── types.ts │ │ └── index.ts │ └── language-context.tsx ├── utils.ts ├── openai.ts ├── aws-config.ts ├── prisma.ts ├── audio-cache.ts ├── auth.ts ├── rate-limit.ts ├── email-templates │ ├── VerificationEmail.tsx │ └── ResetPasswordEmail.tsx └── db.ts ├── components ├── ui │ ├── aspect-ratio.tsx │ ├── skeleton.tsx │ ├── collapsible.tsx │ ├── label.tsx │ ├── textarea.tsx │ ├── separator.tsx │ ├── progress.tsx │ ├── toaster.tsx │ ├── sonner.tsx │ ├── checkbox.tsx │ ├── slider.tsx │ ├── switch.tsx │ ├── badge.tsx │ ├── tooltip.tsx │ ├── hover-card.tsx │ ├── popover.tsx │ ├── input.tsx │ ├── avatar.tsx │ ├── toggle.tsx │ ├── radio-group.tsx │ ├── alert.tsx │ ├── scroll-area.tsx │ ├── resizable.tsx │ ├── toggle-group.tsx │ ├── button.tsx │ ├── tabs.tsx │ ├── accordion.tsx │ ├── card.tsx │ ├── input-otp.tsx │ ├── calendar.tsx │ ├── breadcrumb.tsx │ ├── pagination.tsx │ ├── table.tsx │ ├── drawer.tsx │ ├── dialog.tsx │ ├── use-toast.ts │ ├── sheet.tsx │ ├── form.tsx │ ├── alert-dialog.tsx │ ├── toast.tsx │ ├── navigation-menu.tsx │ └── command.tsx ├── theme-provider.tsx ├── sign-out-button.tsx ├── providers.tsx ├── google-analytics.tsx ├── require-auth.tsx ├── footer.tsx ├── audio-visualizer.tsx └── voice-selector.tsx ├── next.config.js ├── types └── next-auth.d.ts ├── i18n.ts ├── components.json ├── .gitignore ├── tsconfig.json ├── hooks ├── use-analytics.ts ├── use-speech.ts └── use-toast.ts ├── .env.example ├── tailwind.config.ts ├── README.md └── package.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/images/logo.png -------------------------------------------------------------------------------- /public/images/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/images/og-image.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/images/cloning-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/images/cloning-og.png -------------------------------------------------------------------------------- /public/images/studio-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/images/studio-og.png -------------------------------------------------------------------------------- /public/screenshots/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/screenshots/home.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ItusiAI/Open-VoiceCanvas/HEAD/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /app/verify-email/page.tsx: -------------------------------------------------------------------------------- 1 | import VerifyEmail from '@/app/components/verify-email'; 2 | 3 | export default function VerifyEmailPage() { 4 | return ; 5 | } -------------------------------------------------------------------------------- /prisma/migrations/migration_lock.toml: -------------------------------------------------------------------------------- 1 | # Please do not edit this file manually 2 | # It should be added in your version-control system (e.g., Git) 3 | provider = "postgresql" -------------------------------------------------------------------------------- /lib/i18n/index.ts: -------------------------------------------------------------------------------- 1 | import { useTranslations } from 'next-intl'; 2 | 3 | export function t(key: string, params?: Record) { 4 | return useTranslations()(key, params); 5 | } -------------------------------------------------------------------------------- /app/reset-password/page.tsx: -------------------------------------------------------------------------------- 1 | import ResetPasswordForm from '@/app/components/reset-password-form'; 2 | 3 | export default function ResetPasswordPage() { 4 | return ; 5 | } -------------------------------------------------------------------------------- /app/forgot-password/page.tsx: -------------------------------------------------------------------------------- 1 | import ForgotPasswordForm from '@/app/components/forgot-password-form'; 2 | 3 | export default function ForgotPasswordPage() { 4 | return ; 5 | } -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /components/ui/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'; 4 | 5 | const AspectRatio = AspectRatioPrimitive.Root; 6 | 7 | export { AspectRatio }; 8 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | eslint: { 6 | ignoreDuringBuilds: true, 7 | }, 8 | images: { unoptimized: true }, 9 | }; 10 | 11 | module.exports = nextConfig; 12 | -------------------------------------------------------------------------------- /lib/openai.ts: -------------------------------------------------------------------------------- 1 | import OpenAI from 'openai'; 2 | 3 | // 模型常量 4 | export const TTS_MODEL = 'gpt-4o-mini-tts'; 5 | 6 | // 检查环境变量 7 | const apiKey = process.env.OPENAI_API_KEY || ''; 8 | 9 | // 只有在实际调用API时才检查API密钥 10 | export const openai = new OpenAI({ 11 | apiKey, 12 | timeout: 60 * 1000, // 60秒超时 13 | maxRetries: 3, // 最多重试3次 14 | }); 15 | -------------------------------------------------------------------------------- /components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@/lib/utils'; 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ); 13 | } 14 | 15 | export { Skeleton }; 16 | -------------------------------------------------------------------------------- /components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { ThemeProvider as NextThemesProvider } from "next-themes"; 5 | import { type ThemeProviderProps } from "next-themes/dist/types"; 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children}; 9 | } -------------------------------------------------------------------------------- /lib/aws-config.ts: -------------------------------------------------------------------------------- 1 | import { PollyClient } from "@aws-sdk/client-polly"; 2 | 3 | // AWS 配置 4 | export const pollyClient = new PollyClient({ 5 | region: process.env.NEXT_PUBLIC_AWS_REGION || "us-east-1", 6 | credentials: { 7 | accessKeyId: process.env.NEXT_PUBLIC_AWS_ACCESS_KEY_ID || "", 8 | secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY || "", 9 | }, 10 | }); -------------------------------------------------------------------------------- /components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; 4 | 5 | const Collapsible = CollapsiblePrimitive.Root; 6 | 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger; 8 | 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent; 10 | 11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }; 12 | -------------------------------------------------------------------------------- /types/next-auth.d.ts: -------------------------------------------------------------------------------- 1 | import NextAuth from 'next-auth'; 2 | 3 | declare module 'next-auth' { 4 | interface Session { 5 | user: { 6 | id: string; 7 | email: string; 8 | name?: string | null; 9 | image?: string | null; 10 | }; 11 | } 12 | 13 | interface User { 14 | id: string; 15 | email: string; 16 | name?: string | null; 17 | image?: string | null; 18 | } 19 | } -------------------------------------------------------------------------------- /lib/prisma.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from '@prisma/client' 2 | 3 | const prismaClientSingleton = () => { 4 | return new PrismaClient({ 5 | log: ['query', 'error', 'warn'], 6 | }); 7 | }; 8 | 9 | declare global { 10 | var prisma: undefined | ReturnType; 11 | } 12 | 13 | export const prisma = globalThis.prisma ?? prismaClientSingleton(); 14 | 15 | if (process.env.NODE_ENV !== 'production') { 16 | globalThis.prisma = prisma; 17 | } -------------------------------------------------------------------------------- /i18n.ts: -------------------------------------------------------------------------------- 1 | import { getRequestConfig } from 'next-intl/server'; 2 | import { translations } from '@/lib/i18n/translations'; 3 | 4 | export default getRequestConfig(async ({ locale }) => { 5 | const messages = translations[locale as keyof typeof translations]; 6 | return { 7 | messages: Object.entries(messages).reduce((acc, [key, value]) => { 8 | acc[key] = typeof value === 'function' ? value({}) : value; 9 | return acc; 10 | }, {} as Record) 11 | }; 12 | }); -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.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 | 27 | # local env files 28 | .env*.local 29 | .env 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | # sqlite 39 | sqlite.db 40 | -------------------------------------------------------------------------------- /app/auth/login/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { useEffect } from 'react'; 4 | import { AuthDialog } from '@/components/auth-dialog'; 5 | import { useRouter } from 'next/navigation'; 6 | 7 | export default function LoginPage() { 8 | const router = useRouter(); 9 | 10 | useEffect(() => { 11 | // 自动打开登录对话框 12 | const loginTrigger = document.querySelector('[data-login-trigger="true"]'); 13 | if (loginTrigger) { 14 | (loginTrigger as HTMLButtonElement).click(); 15 | } 16 | // 返回上一页 17 | router.back(); 18 | }, [router]); 19 | 20 | return null; 21 | } -------------------------------------------------------------------------------- /lib/i18n/translations/types.ts: -------------------------------------------------------------------------------- 1 | import { en } from './en'; 2 | 3 | export type Language = 4 | | 'en' | 'zh' | 'ja' | 'ko' | 'es' | 'fr' | 'ru' | 'it' | 'pt' | 'de' 5 | | 'id' | 'ar' | 'yue' | 'da' | 'nl' | 'fi' | 'el' | 'he' | 'hi' | 'hu' 6 | | 'no' | 'pl' | 'ro' | 'sv' | 'tr' | 'cy' | 'cs' | 'uk' | 'vi'; 7 | 8 | export type TranslationValue = string | ((params: Record) => string); 9 | 10 | export type TranslationType = { 11 | [key: string]: TranslationValue; 12 | }; 13 | 14 | export type Translations = typeof en; 15 | 16 | export type TranslationKey = keyof typeof en; -------------------------------------------------------------------------------- /components/sign-out-button.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { signOut } from 'next-auth/react'; 4 | import { Button } from '@/components/ui/button'; 5 | import { LogOut } from 'lucide-react'; 6 | import { useLanguage } from '@/lib/i18n/language-context'; 7 | 8 | export function SignOutButton() { 9 | const { t } = useLanguage(); 10 | 11 | return ( 12 | 20 | ); 21 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2020", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /components/providers.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { SessionProvider } from "next-auth/react"; 4 | import { ThemeProvider } from "@/components/theme-provider"; 5 | import { LanguageProvider } from "@/lib/i18n/language-context"; 6 | 7 | export function Providers({ 8 | children, 9 | session 10 | }: { 11 | children: React.ReactNode; 12 | session: any; 13 | }) { 14 | return ( 15 | 16 | 22 | 23 | {children} 24 | 25 | 26 | 27 | ); 28 | } -------------------------------------------------------------------------------- /components/google-analytics.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import Script from 'next/script'; 4 | 5 | const NEXT_PUBLIC_GA_ID = process.env.NEXT_PUBLIC_GA_ID; 6 | 7 | export function GoogleAnalytics() { 8 | // 如果没有配置 GA ID，则不加载 GA 9 | if (!NEXT_PUBLIC_GA_ID) { 10 | return null; 11 | } 12 | 13 | return ( 14 | <> 15 | 27 | 28 | ); 29 | } -------------------------------------------------------------------------------- /hooks/use-analytics.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | declare global { 4 | interface Window { 5 | gtag: (...args: any[]) => void; 6 | } 7 | } 8 | 9 | export const useAnalytics = () => { 10 | const trackEvent = (action: string, category: string, label: string, value?: number) => { 11 | if (typeof window !== 'undefined' && window.gtag) { 12 | window.gtag('event', action, { 13 | event_category: category, 14 | event_label: label, 15 | value: value 16 | }); 17 | } 18 | }; 19 | 20 | const trackPageView = (url: string) => { 21 | if (typeof window !== 'undefined' && window.gtag) { 22 | window.gtag('config', process.env.NEXT_PUBLIC_GA_ID!, { 23 | page_path: url 24 | }); 25 | } 26 | }; 27 | 28 | return { 29 | trackEvent, 30 | trackPageView 31 | }; 32 | }; -------------------------------------------------------------------------------- /components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | import * as LabelPrimitive from '@radix-ui/react-label'; 5 | import { cva, type VariantProps } from 'class-variance-authority'; 6 | 7 | import { cn } from '@/lib/utils'; 8 | 9 | const labelVariants = cva( 10 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70' 11 | ); 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )); 24 | Label.displayName = LabelPrimitive.Root.displayName; 25 | 26 | export { Label }; 27 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |