224 lines
8.2 KiB
TypeScript
224 lines
8.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { Header } from '@/components/header'
|
|
import { Footer } from '@/components/footer'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { CustomSolutionCTA } from '@/components/ui/custom-solution-cta'
|
|
import { Mic, Image as ImageIcon, Volume2, Check, ArrowRight, Wrench, Zap } from 'lucide-react'
|
|
|
|
interface WebTool {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
longDescription: string
|
|
features: string[]
|
|
icon: any
|
|
href: string
|
|
status: 'available' | 'coming-soon' | 'beta'
|
|
category: 'Audio' | 'Image' | 'Text'
|
|
}
|
|
|
|
export default function ToolsPage() {
|
|
const webTools: WebTool[] = [
|
|
{
|
|
id: 'web-speech',
|
|
title: 'Ask AI with Voice',
|
|
description: 'Voice-to-AI conversation with real-time speech recognition and AI responses.',
|
|
longDescription:
|
|
'Complete voice interaction system that converts speech to text, processes it with AI, and speaks back the response. Features continuous speech recognition, OpenAI integration, and automatic text-to-speech playback.',
|
|
features: [
|
|
'Real-time speech recognition',
|
|
'AI-powered responses via OpenAI',
|
|
'Automatic text-to-speech playback',
|
|
'Silence detection and auto-stop',
|
|
'Session management and debugging',
|
|
'Browser-based speech API',
|
|
'Continuous conversation flow',
|
|
],
|
|
icon: Mic,
|
|
href: '/tools/web-speech',
|
|
status: 'available',
|
|
category: 'Audio',
|
|
},
|
|
{
|
|
id: 'speech-to-text',
|
|
title: 'Speech to Text',
|
|
description: 'Real-time transcription with high accuracy using advanced AI models.',
|
|
longDescription:
|
|
'Convert audio recordings and live speech to text with multiple API integration including Whisper (GPU) and Vosk (CPU). Features real-time transcription, audio recording capability, and wide language support.',
|
|
features: [
|
|
'Real-time transcription',
|
|
'Multiple API integration (Whisper, Vosk)',
|
|
'Audio recording capability',
|
|
'Export transcription as text files',
|
|
'Wide language support',
|
|
'Punctuation and formatting options',
|
|
],
|
|
icon: Mic,
|
|
href: '/tools/speech-to-text',
|
|
status: 'available',
|
|
category: 'Audio',
|
|
},
|
|
{
|
|
id: 'image-resize',
|
|
title: 'Image Resize',
|
|
description: 'Fast image processing with preset dimensions for social media.',
|
|
longDescription:
|
|
'Resize and optimize images quickly with preset dimensions for social media and web use. Supports multiple formats with quality adjustment and batch processing capabilities.',
|
|
features: [
|
|
'Fast image processing',
|
|
'Preset dimensions for social media',
|
|
'Maintain aspect ratio',
|
|
'Quality adjustment',
|
|
'Multiple formats (JPG, PNG, WebP)',
|
|
'Preview before download',
|
|
'Batch processing',
|
|
],
|
|
icon: ImageIcon,
|
|
href: '/tools/image-resize',
|
|
status: 'coming-soon',
|
|
category: 'Image',
|
|
},
|
|
{
|
|
id: 'text-to-speech',
|
|
title: 'Text to Speech',
|
|
description: 'High-quality speech synthesis with multiple voice options.',
|
|
longDescription:
|
|
'Convert text to natural-sounding speech with multiple voice options and customizable settings. Features adjustable speech speed, downloadable audio files, and API integration.',
|
|
features: [
|
|
'High-quality speech synthesis',
|
|
'Multiple voice options',
|
|
'Adjustable speech speed',
|
|
'Download as audio file',
|
|
'Text formatting support',
|
|
'API integration',
|
|
'Dialog and logging features',
|
|
],
|
|
icon: Volume2,
|
|
href: '/tools/text-to-speech',
|
|
status: 'available',
|
|
category: 'Audio',
|
|
},
|
|
]
|
|
|
|
const getStatusBadge = (status: WebTool['status']) => {
|
|
switch (status) {
|
|
case 'available':
|
|
return (
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
|
|
>
|
|
Available
|
|
</Badge>
|
|
)
|
|
case 'beta':
|
|
return (
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
|
|
>
|
|
Beta
|
|
</Badge>
|
|
)
|
|
case 'coming-soon':
|
|
return (
|
|
<Badge variant="outline" className="text-muted-foreground">
|
|
Coming Soon
|
|
</Badge>
|
|
)
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
const categories = Array.from(new Set(webTools.map((tool) => tool.category)))
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
<main className="container max-w-6xl pt-24 pb-8">
|
|
{/* Page Header */}
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl font-bold tracking-tight mb-4">SiliconPin Web Tools</h1>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
Powerful web-based tools to enhance your productivity. Process audio, resize images, and
|
|
convert text to speech with our advanced AI-powered utilities.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tools Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
|
|
{webTools.map((tool) => {
|
|
const Icon = tool.icon
|
|
return (
|
|
<Card key={tool.id} className="h-full hover:shadow-lg transition-shadow">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 rounded-lg p-2">
|
|
<Icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl">{tool.title}</CardTitle>
|
|
<div className="mt-1">{getStatusBadge(tool.status)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CardDescription className="text-base">{tool.longDescription}</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className="mb-6">
|
|
<h4 className="font-medium text-sm mb-3 text-muted-foreground">
|
|
Key Features:
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{tool.features.slice(0, 4).map((feature, index) => (
|
|
<li key={index} className="flex items-start text-sm">
|
|
<Check className="w-4 h-4 text-green-600 mr-2 mt-0.5 shrink-0" />
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
{tool.features.length > 4 && (
|
|
<li className="text-sm text-muted-foreground">
|
|
+{tool.features.length - 4} more features...
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
{tool.status === 'available' ? (
|
|
<Button asChild className="flex-1">
|
|
<Link href={tool.href}>
|
|
<ArrowRight className="w-4 h-4 mr-2" />
|
|
Launch Tool
|
|
</Link>
|
|
</Button>
|
|
) : (
|
|
<Button disabled className="flex-1">
|
|
{tool.status === 'coming-soon' ? 'Coming Soon' : 'Preview'}
|
|
</Button>
|
|
)}
|
|
<Button variant="outline" size="sm" className="shrink-0">
|
|
Learn More
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Need Something Custom */}
|
|
<CustomSolutionCTA description="We offer custom tool development and API integration services for your specific requirements" />
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|