forked from mito-systems/sol-mem-gen
133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
|
|
interface AIServiceCardProps {
|
|
title: string
|
|
description: string
|
|
isWalletConnected: boolean
|
|
onGenerate: (prompt: string) => Promise<{ imageUrl?: string, error?: string }>
|
|
mtmPrice: bigint
|
|
}
|
|
|
|
interface GenerationState {
|
|
loading: boolean
|
|
processing: boolean
|
|
imageUrl: string | null
|
|
error: string | null
|
|
}
|
|
|
|
const AIServiceCard: React.FC<AIServiceCardProps> = ({
|
|
title,
|
|
description,
|
|
isWalletConnected,
|
|
onGenerate,
|
|
mtmPrice
|
|
}) => {
|
|
const [inputText, setInputText] = useState<string>('')
|
|
const [generationState, setGenerationState] = useState<GenerationState>({
|
|
loading: false,
|
|
processing: false,
|
|
imageUrl: null,
|
|
error: null,
|
|
})
|
|
|
|
const handleGenerate = async (): Promise<void> => {
|
|
if (!inputText || !isWalletConnected) return
|
|
|
|
setGenerationState({
|
|
...generationState,
|
|
loading: true,
|
|
error: null,
|
|
})
|
|
|
|
try {
|
|
const result = await onGenerate(inputText)
|
|
|
|
if (result.error) {
|
|
setGenerationState({
|
|
...generationState,
|
|
loading: false,
|
|
error: result.error,
|
|
})
|
|
return
|
|
}
|
|
|
|
if (result.imageUrl) {
|
|
setGenerationState({
|
|
loading: false,
|
|
processing: false,
|
|
imageUrl: result.imageUrl,
|
|
error: null,
|
|
})
|
|
} else {
|
|
throw new Error('No image URL received')
|
|
}
|
|
} catch (error) {
|
|
setGenerationState({
|
|
...generationState,
|
|
loading: false,
|
|
error: error instanceof Error ? error.message : 'Generation failed',
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="w-full bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl border border-gray-700/50 mb-8">
|
|
<div className="p-6">
|
|
<div className="mb-4">
|
|
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">
|
|
{title}
|
|
</h2>
|
|
<p className="text-gray-400 mt-2">{description}</p>
|
|
<div className="mt-2 inline-block px-3 py-1 bg-green-500/20 rounded-full text-green-300 text-sm">
|
|
Cost: {mtmPrice ? (mtmPrice / BigInt(10 ** 6)).toString() : '...'} MTM
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<textarea
|
|
value={inputText}
|
|
onChange={(e) => setInputText(e.target.value)}
|
|
placeholder="Enter your prompt here..."
|
|
disabled={!isWalletConnected}
|
|
className="w-full bg-gray-900/50 text-gray-100 border border-gray-700 rounded-xl p-4
|
|
placeholder-gray-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20
|
|
focus:outline-none min-h-[120px] transition-all duration-200
|
|
disabled:opacity-50 disabled:cursor-not-allowed"
|
|
rows={4}
|
|
/>
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={!isWalletConnected || generationState.loading || !inputText}
|
|
className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600
|
|
hover:to-emerald-600 text-white font-semibold py-4 px-6 rounded-xl
|
|
transition-all duration-200 shadow-lg hover:shadow-green-500/25
|
|
disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
|
|
>
|
|
{generationState.loading ? 'Processing...' : `Pay ${mtmPrice ? (mtmPrice / BigInt(10 ** 6)).toString() : '...'} MTM & Generate`}
|
|
</button>
|
|
</div>
|
|
|
|
{generationState.error && (
|
|
<div className="mt-4 bg-red-900/20 border border-red-500/20 text-red-400 px-4 py-3 rounded-xl text-center">
|
|
{generationState.error}
|
|
</div>
|
|
)}
|
|
|
|
{generationState.imageUrl && (
|
|
<div className="mt-4">
|
|
<img
|
|
src={generationState.imageUrl}
|
|
alt="Generated content"
|
|
className="w-full h-auto rounded-xl shadow-2xl"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AIServiceCard
|