sweet
This commit is contained in:
zramsay
parent
aeb240cfc5
commit
2fafd17cdb
55
src/app/api/flux/route.ts
Normal file
55
src/app/api/flux/route.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { fal } from "@fal-ai/client"
|
||||
|
||||
if (!process.env.FAL_AI_KEY) {
|
||||
throw new Error('FAL_AI_KEY is not configured in environment variables')
|
||||
}
|
||||
|
||||
// Configure fal client
|
||||
fal.config({
|
||||
credentials: process.env.FAL_AI_KEY
|
||||
})
|
||||
|
||||
export async function POST(req: NextRequest): Promise<NextResponse> {
|
||||
try {
|
||||
const { prompt, modelId } = await req.json()
|
||||
|
||||
if (!prompt || !modelId) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Prompt and modelId are required' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
console.log('Generating with Flux model:', modelId)
|
||||
console.log('Prompt:', prompt)
|
||||
|
||||
const result = await fal.subscribe(modelId, {
|
||||
input: {
|
||||
prompt: prompt,
|
||||
},
|
||||
logs: true,
|
||||
onQueueUpdate: (update) => {
|
||||
if (update.status === "IN_PROGRESS") {
|
||||
console.log('Generation progress:', update.logs.map((log) => log.message))
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
console.log('Flux generation result:', result)
|
||||
|
||||
if (!result.data?.images?.[0]?.url) {
|
||||
throw new Error('No image URL in response')
|
||||
}
|
||||
|
||||
return NextResponse.json({ imageUrl: result.data.images[0].url })
|
||||
} catch (error) {
|
||||
console.error('Flux generation error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: error instanceof Error ? error.message : 'Failed to generate image' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
211
src/app/page.tsx
211
src/app/page.tsx
@ -3,12 +3,7 @@
|
||||
import React, { useState } from 'react'
|
||||
import WalletHeader from '../components/WalletHeader'
|
||||
import AIServiceCard from '../components/AIServiceCard'
|
||||
import TextGenerationCard from '../components/TextGenerationCard'
|
||||
import { generateWithFlux, FluxGenerationResult } from '../services/fluxService'
|
||||
import { generateWithAdobe, AdobeGenerationResult } from '../services/adobeService'
|
||||
import { generateWithGrok, GrokGenerationResult } from '../services/grokService'
|
||||
import { generateWithOllama, OllamaGenerationResult } from '../services/ollamaService'
|
||||
import { generateWithGemini, GeminiGenerationResult } from '../services/geminiService'
|
||||
import { generateWithFlux, FluxGenerationResult, FLUX_MODELS } from '../services/fluxService'
|
||||
import { processMTMPayment } from '../services/paymentService'
|
||||
|
||||
interface WalletState {
|
||||
@ -48,100 +43,26 @@ const Page: React.FC = (): React.ReactElement => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleFluxGeneration = async (prompt: string): Promise<FluxGenerationResult> => {
|
||||
if (!walletState.connected || !walletState.publicKey || !window.solflare) {
|
||||
return { error: 'Wallet not connected' }
|
||||
const handleFluxGeneration = (modelId: string, cost: number) => {
|
||||
return async (prompt: string): Promise<FluxGenerationResult> => {
|
||||
if (!walletState.connected || !walletState.publicKey || !window.solflare) {
|
||||
return { error: 'Wallet not connected' }
|
||||
}
|
||||
|
||||
// Process payment first
|
||||
const paymentResult = await processMTMPayment(
|
||||
walletState.publicKey,
|
||||
cost,
|
||||
window.solflare
|
||||
)
|
||||
|
||||
if (!paymentResult.success) {
|
||||
return { error: paymentResult.error }
|
||||
}
|
||||
|
||||
// Then generate image with specified model
|
||||
return generateWithFlux(prompt, modelId)
|
||||
}
|
||||
|
||||
// First process payment
|
||||
const paymentResult = await processMTMPayment(
|
||||
walletState.publicKey,
|
||||
1, // 1 MTM token
|
||||
window.solflare
|
||||
)
|
||||
|
||||
if (!paymentResult.success) {
|
||||
return { error: paymentResult.error }
|
||||
}
|
||||
|
||||
// Then generate image
|
||||
return generateWithFlux(prompt)
|
||||
}
|
||||
|
||||
const handleGrokGeneration = async (prompt: string): Promise<GrokGenerationResult> => {
|
||||
if (!walletState.connected || !walletState.publicKey || !window.solflare) {
|
||||
return { error: 'Wallet not connected' }
|
||||
}
|
||||
|
||||
const paymentResult = await processMTMPayment(
|
||||
walletState.publicKey,
|
||||
5, // 5 MTM tokens for Grok premium service
|
||||
window.solflare
|
||||
)
|
||||
|
||||
if (!paymentResult.success) {
|
||||
return { error: paymentResult.error }
|
||||
}
|
||||
|
||||
return generateWithGrok(prompt)
|
||||
}
|
||||
|
||||
const handleAdobeGeneration = async (prompt: string): Promise<AdobeGenerationResult> => {
|
||||
if (!walletState.connected || !walletState.publicKey || !window.solflare) {
|
||||
return { error: 'Wallet not connected' }
|
||||
}
|
||||
|
||||
const paymentResult = await processMTMPayment(
|
||||
walletState.publicKey,
|
||||
4, // 4 MTM tokens for Adobe premium service
|
||||
window.solflare
|
||||
)
|
||||
|
||||
if (!paymentResult.success) {
|
||||
return { error: paymentResult.error }
|
||||
}
|
||||
|
||||
return generateWithAdobe(prompt)
|
||||
}
|
||||
|
||||
const handleOllamaGeneration = async (prompt: string): Promise<OllamaGenerationResult> => {
|
||||
if (!walletState.connected || !walletState.publicKey || !window.solflare) {
|
||||
return { error: 'Wallet not connected' }
|
||||
}
|
||||
|
||||
// First process payment
|
||||
const paymentResult = await processMTMPayment(
|
||||
walletState.publicKey,
|
||||
2, // 2 MTM tokens for text generation
|
||||
window.solflare
|
||||
)
|
||||
|
||||
if (!paymentResult.success) {
|
||||
return { error: paymentResult.error }
|
||||
}
|
||||
|
||||
// Then generate text
|
||||
return generateWithOllama(prompt)
|
||||
}
|
||||
|
||||
const handleGeminiGeneration = async (prompt: string): Promise<GeminiGenerationResult> => {
|
||||
if (!walletState.connected || !walletState.publicKey || !window.solflare) {
|
||||
return { error: 'Wallet not connected' }
|
||||
}
|
||||
|
||||
// First process payment
|
||||
const paymentResult = await processMTMPayment(
|
||||
walletState.publicKey,
|
||||
3, // 3 MTM tokens for Gemini
|
||||
window.solflare
|
||||
)
|
||||
|
||||
if (!paymentResult.success) {
|
||||
return { error: paymentResult.error }
|
||||
}
|
||||
|
||||
// Then generate text
|
||||
return generateWithGemini(prompt)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -150,10 +71,10 @@ const handleGeminiGeneration = async (prompt: string): Promise<GeminiGenerationR
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">
|
||||
Mark's Meme Market
|
||||
AI Image Generator
|
||||
</h1>
|
||||
<p className="text-gray-400 text-lg mb-8">
|
||||
Generate memes using various AI models
|
||||
Generate amazing images using different Flux AI models
|
||||
</p>
|
||||
|
||||
<WalletHeader
|
||||
@ -163,56 +84,56 @@ const handleGeminiGeneration = async (prompt: string): Promise<GeminiGenerationR
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* AI Services Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<AIServiceCard
|
||||
title="Flux Meme Generator"
|
||||
description="Generate images using Flux AI"
|
||||
tokenCost={1}
|
||||
isWalletConnected={walletState.connected}
|
||||
onGenerate={handleFluxGeneration}
|
||||
/>
|
||||
{/* Flux Models Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{FLUX_MODELS.map((model) => (
|
||||
<AIServiceCard
|
||||
key={model.modelId}
|
||||
title={model.name}
|
||||
description={model.description}
|
||||
tokenCost={model.cost}
|
||||
isWalletConnected={walletState.connected}
|
||||
onGenerate={handleFluxGeneration(model.modelId, model.cost)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AIServiceCard
|
||||
title="X Grok Vision"
|
||||
description="Advanced image generation by X's Grok AI"
|
||||
tokenCost={5}
|
||||
isWalletConnected={walletState.connected}
|
||||
onGenerate={handleGrokGeneration}
|
||||
/>
|
||||
|
||||
{/*
|
||||
<AIServiceCard
|
||||
title="Adobe Meme Generator"
|
||||
description="Generate images images using Adobe"
|
||||
tokenCost={4}
|
||||
isWalletConnected={walletState.connected}
|
||||
onGenerate={handleAdobeGeneration}
|
||||
/>*/}
|
||||
|
||||
|
||||
{/* for another app
|
||||
<TextGenerationCard
|
||||
title="Ollama AI Chat"
|
||||
description="Get intelligent responses using local LLaMA2 model"
|
||||
tokenCost={2}
|
||||
isWalletConnected={walletState.connected}
|
||||
onGenerate={handleOllamaGeneration}
|
||||
/>
|
||||
|
||||
<TextGenerationCard
|
||||
title="Gemini Pro"
|
||||
description="Advanced AI responses powered by Google's Gemini 1.5"
|
||||
tokenCost={3}
|
||||
isWalletConnected={walletState.connected}
|
||||
onGenerate={handleGeminiGeneration}
|
||||
/> */}
|
||||
{/* Coming Soon Card */}
|
||||
<div className="relative bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-xl border border-gray-700/50 overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 opacity-50"></div>
|
||||
<div className="relative p-6 flex flex-col h-full">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500">
|
||||
Coming Soon
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-400">
|
||||
New AI model integration in development. Stay tuned for more amazing features!
|
||||
</p>
|
||||
<div className="mt-2 inline-block px-3 py-1 bg-orange-500/20 rounded-full">
|
||||
<span className="text-orange-300 text-sm">Future Release</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<button
|
||||
disabled
|
||||
className="w-full bg-gradient-to-r from-yellow-500/50 to-orange-500/50
|
||||
text-white/50 font-semibold py-4 px-6 rounded-xl
|
||||
cursor-not-allowed opacity-50"
|
||||
>
|
||||
Coming Soon
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Section */}
|
||||
<div className="mt-12 text-center text-gray-400">
|
||||
<p className="text-sm">
|
||||
Powered by Mark • Requires MTM tokens
|
||||
Powered by Flux AI • Different models have different costs and capabilities
|
||||
</p>
|
||||
<p className="text-sm mt-2">
|
||||
Each generation requires MTM tokens • Higher quality models cost more tokens
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,51 @@
|
||||
import { fal } from "@fal-ai/client"
|
||||
|
||||
export interface FluxGenerationResult {
|
||||
imageUrl?: string
|
||||
error?: string
|
||||
}
|
||||
|
||||
export async function generateWithFlux(prompt: string): Promise<FluxGenerationResult> {
|
||||
export interface FluxModelConfig {
|
||||
modelId: string
|
||||
name: string
|
||||
description: string
|
||||
cost: number
|
||||
}
|
||||
|
||||
// Available Flux/fal-ai models
|
||||
export const FLUX_MODELS: FluxModelConfig[] = [
|
||||
{
|
||||
modelId: "fal-ai/flux/schnell",
|
||||
name: "Schnell",
|
||||
description: "Fast meme generator",
|
||||
cost: 5 // update to 500 MTM
|
||||
},
|
||||
{
|
||||
modelId: "fal-ai/recraft-v3",
|
||||
name: "Recraft",
|
||||
description: "Advanced meme generator",
|
||||
cost: 6 // update to ?
|
||||
},
|
||||
{
|
||||
modelId: "fal-ai/stable-diffusion-v35-large",
|
||||
name: "Marquee",
|
||||
description: "Best meme generator",
|
||||
cost: 10 //update to more
|
||||
}
|
||||
]
|
||||
|
||||
export async function generateWithFlux(
|
||||
prompt: string,
|
||||
modelId: string
|
||||
): Promise<FluxGenerationResult> {
|
||||
try {
|
||||
const response = await fetch('/api/generate', {
|
||||
const response = await fetch('/api/flux', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ prompt }),
|
||||
body: JSON.stringify({
|
||||
prompt,
|
||||
modelId
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
@ -21,16 +54,16 @@ export async function generateWithFlux(prompt: string): Promise<FluxGenerationRe
|
||||
|
||||
const data = await response.json()
|
||||
console.log('Raw Flux response:', data)
|
||||
|
||||
if (data.data?.images?.[0]?.url) {
|
||||
return { imageUrl: data.data.images[0].url }
|
||||
|
||||
if (data.imageUrl) {
|
||||
return { imageUrl: data.imageUrl }
|
||||
} else {
|
||||
console.error('Unexpected response structure:', data)
|
||||
throw new Error('Invalid response format from Flux API')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Generation error:', error)
|
||||
return {
|
||||
console.error('Flux generation error:', error)
|
||||
return {
|
||||
error: error instanceof Error ? error.message : 'Generation failed'
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user