How to Integrate Bolt.new with Algorithmia

1// lib/huggingface.ts
2const HF_API_BASE = 'https://api-inference.huggingface.co/models';
3
4export async function huggingfaceInfer<T>(
5  modelId: string,
6  inputs: string | Record<string, unknown>,
7  retryOnLoading = true
8): Promise<T> {
9  const apiKey = process.env.HUGGING_FACE_API_KEY;
10  if (!apiKey) throw new Error('HUGGING_FACE_API_KEY not set in .env');
11
12  const response = await fetch(`${HF_API_BASE}/${modelId}`, {
13    method: 'POST',
14    headers: {
15      Authorization: `Bearer ${apiKey}`,
16      'Content-Type': 'application/json',
17    },
18    body: JSON.stringify({ inputs }),
19  });
20
21  if (response.status === 503) {
22    // Model is loading — HF cold-starts models that haven't been used recently
23    const errorBody = await response.json();
24    const waitSeconds = errorBody.estimated_time ?? 20;
25    if (retryOnLoading) {
26      console.log(`HF model ${modelId} loading, retrying in ${waitSeconds}s...`);
27      await new Promise((res) => setTimeout(res, waitSeconds * 1000));
28      return huggingfaceInfer<T>(modelId, inputs, false); // retry once
29    }
30    throw new Error(`Model ${modelId} is loading. Try again in ${waitSeconds} seconds.`);
31  }
32
33  if (!response.ok) {
34    const error = await response.text();
35    throw new Error(`Hugging Face API error ${response.status}: ${error}`);
36  }
37
38  return response.json() as Promise<T>;
39}

1// app/api/analyze-text/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { huggingfaceInfer } from '@/lib/huggingface';
4
5type AnalysisType = 'sentiment' | 'summarize' | 'entities' | 'embeddings';
6
7const MODELS: Record<AnalysisType, string> = {
8  sentiment: 'cardiffnlp/twitter-roberta-base-sentiment-latest',
9  summarize: 'facebook/bart-large-cnn',
10  entities: 'dslim/bert-base-NER',
11  embeddings: 'sentence-transformers/all-MiniLM-L6-v2',
12};
13
14export async function POST(request: NextRequest) {
15  const body = await request.json();
16  const { text, type }: { text: string; type: AnalysisType } = body;
17
18  if (!text?.trim()) {
19    return NextResponse.json({ error: 'text is required' }, { status: 400 });
20  }
21
22  if (!MODELS[type]) {
23    return NextResponse.json({ error: `Invalid type. Use: ${Object.keys(MODELS).join(', ')}` }, { status: 400 });
24  }
25
26  try {
27    const raw = await huggingfaceInfer(MODELS[type], text);
28
29    let result;
30    switch (type) {
31      case 'sentiment': {
32        // Returns array of [{label, score}] sorted by score desc
33        const preds = raw as Array<{ label: string; score: number }>;
34        result = { label: preds[0]?.label, score: preds[0]?.score };
35        break;
36      }
37      case 'summarize': {
38        const summary = raw as Array<{ summary_text: string }>;
39        result = { summary: summary[0]?.summary_text };
40        break;
41      }
42      case 'entities': {
43        result = { entities: raw }; // array of {word, entity_group, score, start, end}
44        break;
45      }
46      case 'embeddings': {
47        // Feature extraction returns nested array [[...floats]]
48        const vectors = raw as number[][];
49        result = { vector: vectors[0], dimensions: vectors[0]?.length };
50        break;
51      }
52    }
53
54    return NextResponse.json({ type, result });
55  } catch (error) {
56    return NextResponse.json(
57      { error: error instanceof Error ? error.message : 'Analysis failed' },
58      { status: 500 }
59    );
60  }
61}

1// app/api/generate-image/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const REPLICATE_API_TOKEN = process.env.REPLICATE_API_TOKEN;
5const REPLICATE_BASE = 'https://api.replicate.com/v1';
6const FLUX_MODEL = 'black-forest-labs/flux-schnell';
7const POLL_INTERVAL_MS = 1500;
8const MAX_WAIT_MS = 90_000;
9
10async function createPrediction(prompt: string, negativePrompt?: string) {
11  const response = await fetch(`${REPLICATE_BASE}/models/${FLUX_MODEL}/predictions`, {
12    method: 'POST',
13    headers: {
14      Authorization: `Bearer ${REPLICATE_API_TOKEN}`,
15      'Content-Type': 'application/json',
16      Prefer: 'wait', // ask Replicate to wait up to 60s before returning
17    },
18    body: JSON.stringify({
19      input: {
20        prompt,
21        negative_prompt: negativePrompt ?? '',
22        num_inference_steps: 4, // schnell is optimized for 4 steps
23        width: 1024,
24        height: 1024,
25      },
26    }),
27  });
28  return response.json();
29}
30
31async function pollPrediction(predictionUrl: string): Promise<string> {
32  const startTime = Date.now();
33  while (Date.now() - startTime < MAX_WAIT_MS) {
34    const res = await fetch(predictionUrl, {
35      headers: { Authorization: `Bearer ${REPLICATE_API_TOKEN}` },
36    });
37    const prediction = await res.json();
38
39    if (prediction.status === 'succeeded') {
40      return prediction.output?.[0] ?? prediction.output;
41    }
42    if (prediction.status === 'failed' || prediction.status === 'canceled') {
43      throw new Error(`Prediction ${prediction.status}: ${prediction.error ?? 'Unknown error'}`);
44    }
45    await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
46  }
47  throw new Error('Generation timed out after 90 seconds');
48}
49
50export async function POST(request: NextRequest) {
51  const { prompt, negative_prompt } = await request.json();
52
53  if (!prompt?.trim()) {
54    return NextResponse.json({ error: 'prompt is required' }, { status: 400 });
55  }
56
57  const startTime = Date.now();
58  try {
59    let prediction = await createPrediction(prompt, negative_prompt);
60
61    // Replicate's 'Prefer: wait' header returns synchronously if fast enough
62    let imageUrl: string;
63    if (prediction.status === 'succeeded') {
64      imageUrl = prediction.output?.[0] ?? prediction.output;
65    } else {
66      imageUrl = await pollPrediction(prediction.urls.get);
67    }
68
69    return NextResponse.json({
70      imageUrl,
71      predictionId: prediction.id,
72      generationTimeMs: Date.now() - startTime,
73    });
74  } catch (error) {
75    return NextResponse.json(
76      { error: error instanceof Error ? error.message : 'Generation failed' },
77      { status: 500 }
78    );
79  }
80}

1// components/AnalysisDashboard.tsx
2'use client';
3import { useState } from 'react';
4
5interface TextResult { type: string; result: Record<string, unknown>; responseTimeMs?: number; }
6interface ImageResult { imageUrl: string; generationTimeMs: number; }
7
8export function AnalysisDashboard() {
9  const [text, setText] = useState('');
10  const [textResult, setTextResult] = useState<TextResult | null>(null);
11  const [textLoading, setTextLoading] = useState<string | null>(null);
12
13  const [prompt, setPrompt] = useState('');
14  const [imageResult, setImageResult] = useState<ImageResult | null>(null);
15  const [imageLoading, setImageLoading] = useState(false);
16  const [error, setError] = useState<string | null>(null);
17
18  const analyzeText = async (type: string) => {
19    setTextLoading(type);
20    setError(null);
21    const start = Date.now();
22    try {
23      const res = await fetch('/api/analyze-text', {
24        method: 'POST',
25        headers: { 'Content-Type': 'application/json' },
26        body: JSON.stringify({ text, type }),
27      });
28      const data = await res.json();
29      if (data.error) throw new Error(data.error);
30      setTextResult({ ...data, responseTimeMs: Date.now() - start });
31    } catch (err) {
32      setError(err instanceof Error ? err.message : 'Failed');
33    } finally {
34      setTextLoading(null);
35    }
36  };
37
38  const generateImage = async () => {
39    setImageLoading(true);
40    setError(null);
41    try {
42      const res = await fetch('/api/generate-image', {
43        method: 'POST',
44        headers: { 'Content-Type': 'application/json' },
45        body: JSON.stringify({ prompt }),
46      });
47      const data = await res.json();
48      if (data.error) throw new Error(data.error);
49      setImageResult(data);
50    } catch (err) {
51      setError(err instanceof Error ? err.message : 'Failed');
52    } finally {
53      setImageLoading(false);
54    }
55  };
56
57  return (
58    <div className="max-w-2xl mx-auto p-6 space-y-8">
59      <div className="space-y-3">
60        <div className="flex items-center gap-2">
61          <h2 className="text-xl font-bold">Text Analysis</h2>
62          <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full">Hugging Face · Free tier</span>
63        </div>
64        <textarea value={text} onChange={(e) => setText(e.target.value)}
65          placeholder="Enter text to analyze..." rows={4}
66          className="w-full border rounded p-3 text-sm" />
67        <div className="flex gap-2 flex-wrap">
68          {['sentiment', 'summarize', 'entities'].map((type) => (
69            <button key={type} onClick={() => analyzeText(type)}
70              disabled={!text.trim() || textLoading === type}
71              className="px-4 py-1.5 bg-blue-600 text-white rounded text-sm disabled:opacity-50 capitalize">
72              {textLoading === type ? 'Analyzing...' : type}
73            </button>
74          ))}
75        </div>
76        {textResult && (
77          <div className="bg-gray-50 border rounded p-3 text-sm">
78            <div className="flex justify-between text-xs text-gray-400 mb-2">
79              <span>Type: {textResult.type}</span>
80              <span>{textResult.responseTimeMs}ms</span>
81            </div>
82            <pre className="whitespace-pre-wrap">{JSON.stringify(textResult.result, null, 2)}</pre>
83          </div>
84        )}
85      </div>
86
87      <div className="space-y-3">
88        <div className="flex items-center gap-2">
89          <h2 className="text-xl font-bold">Image Generation</h2>
90          <span className="text-xs bg-purple-100 text-purple-800 px-2 py-0.5 rounded-full">Replicate · ~$0.003/image</span>
91        </div>
92        <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)}
93          placeholder="Describe an image to generate..." rows={2}
94          className="w-full border rounded p-3 text-sm" />
95        <button onClick={generateImage} disabled={!prompt.trim() || imageLoading}
96          className="w-full bg-purple-600 text-white py-2 rounded disabled:opacity-50">
97          {imageLoading ? 'Generating (3-10s)...' : 'Generate with FLUX'}
98        </button>
99        {imageResult && (
100          <div className="space-y-2">
101            <img src={imageResult.imageUrl} alt={prompt} className="w-full rounded-lg" />
102            <div className="flex justify-between text-xs text-gray-400">
103              <span>Generated in {(imageResult.generationTimeMs / 1000).toFixed(1)}s</span>
104              <a href={imageResult.imageUrl} download className="text-blue-600">Download</a>
105            </div>
106          </div>
107        )}
108      </div>
109
110      {error && <p className="text-red-600 text-sm">{error}</p>}
111    </div>
112  );
113}