@tanstack/ai-solid 0.6.3 → 0.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +8 -2
- package/dist/index.js +7 -1
- package/dist/use-generate-image.d.ts +94 -0
- package/dist/use-generate-image.js +51 -0
- package/dist/use-generate-image.js.map +1 -0
- package/dist/use-generate-speech.d.ts +88 -0
- package/dist/use-generate-speech.js +45 -0
- package/dist/use-generate-speech.js.map +1 -0
- package/dist/use-generate-video.d.ts +101 -0
- package/dist/use-generate-video.js +105 -0
- package/dist/use-generate-video.js.map +1 -0
- package/dist/use-generation.d.ts +86 -0
- package/dist/use-generation.js +86 -0
- package/dist/use-generation.js.map +1 -0
- package/dist/use-summarize.d.ts +91 -0
- package/dist/use-summarize.js +48 -0
- package/dist/use-summarize.js.map +1 -0
- package/dist/use-transcription.d.ts +97 -0
- package/dist/use-transcription.js +54 -0
- package/dist/use-transcription.js.map +1 -0
- package/package.json +4 -4
- package/src/index.ts +42 -0
- package/src/use-generate-image.ts +118 -0
- package/src/use-generate-speech.ts +109 -0
- package/src/use-generate-video.ts +207 -0
- package/src/use-generation.ts +179 -0
- package/src/use-summarize.ts +115 -0
- package/src/use-transcription.ts +123 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { ChatRequestBody, UIMessage, UseChatOptions, UseChatReturn } from "./types.js";
|
|
2
2
|
import { useChat } from "./use-chat.js";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { UseGenerationOptions, UseGenerationReturn, useGeneration } from "./use-generation.js";
|
|
4
|
+
import { UseGenerateImageOptions, UseGenerateImageReturn, useGenerateImage } from "./use-generate-image.js";
|
|
5
|
+
import { UseGenerateSpeechOptions, UseGenerateSpeechReturn, useGenerateSpeech } from "./use-generate-speech.js";
|
|
6
|
+
import { UseTranscriptionOptions, UseTranscriptionReturn, useTranscription } from "./use-transcription.js";
|
|
7
|
+
import { UseSummarizeOptions, UseSummarizeReturn, useSummarize } from "./use-summarize.js";
|
|
8
|
+
import { UseGenerateVideoOptions, UseGenerateVideoReturn, useGenerateVideo } from "./use-generate-video.js";
|
|
9
|
+
import { ConnectionAdapter, FetchConnectionOptions, GenerationClientState, ImageGenerateInput, InferChatMessages, SpeechGenerateInput, SummarizeGenerateInput, TranscriptionGenerateInput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream } from "@tanstack/ai-client";
|
|
10
|
+
export { type ChatRequestBody, type ConnectionAdapter, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type InferChatMessages, type SpeechGenerateInput, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseChatOptions, type UseChatReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream, useChat, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { useChat } from "./use-chat.js";
|
|
2
|
+
import { useGeneration } from "./use-generation.js";
|
|
3
|
+
import { useGenerateImage } from "./use-generate-image.js";
|
|
4
|
+
import { useGenerateSpeech } from "./use-generate-speech.js";
|
|
5
|
+
import { useTranscription } from "./use-transcription.js";
|
|
6
|
+
import { useSummarize } from "./use-summarize.js";
|
|
7
|
+
import { useGenerateVideo } from "./use-generate-video.js";
|
|
2
8
|
import { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream } from "@tanstack/ai-client";
|
|
3
9
|
|
|
4
|
-
export { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream, useChat };
|
|
10
|
+
export { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, stream, useChat, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { Accessor } from "solid-js";
|
|
2
|
+
import { ConnectionAdapter, GenerationClientState, GenerationFetcher, ImageGenerateInput, InferGenerationOutput } from "@tanstack/ai-client";
|
|
3
|
+
import { ImageGenerationResult, StreamChunk } from "@tanstack/ai";
|
|
4
|
+
|
|
5
|
+
//#region src/use-generate-image.d.ts
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Options for the useGenerateImage hook.
|
|
9
|
+
*
|
|
10
|
+
* @template TOutput - The transformed output type (defaults to ImageGenerationResult)
|
|
11
|
+
*/
|
|
12
|
+
interface UseGenerateImageOptions<TOutput = ImageGenerationResult> {
|
|
13
|
+
/** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
|
|
14
|
+
connection?: ConnectionAdapter;
|
|
15
|
+
/** Direct async function for image generation */
|
|
16
|
+
fetcher?: GenerationFetcher<ImageGenerateInput, ImageGenerationResult>;
|
|
17
|
+
/** Unique identifier for this generation instance */
|
|
18
|
+
id?: string;
|
|
19
|
+
/** Additional body parameters to send with ConnectionAdapter requests */
|
|
20
|
+
body?: Record<string, any>;
|
|
21
|
+
/**
|
|
22
|
+
* Callback when images are generated. Can optionally return a transformed value.
|
|
23
|
+
*
|
|
24
|
+
* - Return a non-null value to transform and store it as the result
|
|
25
|
+
* - Return `null` to keep the previous result unchanged
|
|
26
|
+
* - Return nothing (`void`) to store the raw result as-is
|
|
27
|
+
*/
|
|
28
|
+
onResult?: (result: ImageGenerationResult) => TOutput | null | void;
|
|
29
|
+
/** Callback when an error occurs */
|
|
30
|
+
onError?: (error: Error) => void;
|
|
31
|
+
/** Callback when progress is reported (0-100) */
|
|
32
|
+
onProgress?: (progress: number, message?: string) => void;
|
|
33
|
+
/** Callback for each stream chunk (ConnectionAdapter mode only) */
|
|
34
|
+
onChunk?: (chunk: StreamChunk) => void;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Return type for the useGenerateImage hook.
|
|
38
|
+
*
|
|
39
|
+
* @template TOutput - The transformed output type (defaults to ImageGenerationResult)
|
|
40
|
+
*/
|
|
41
|
+
interface UseGenerateImageReturn<TOutput = ImageGenerationResult> {
|
|
42
|
+
/** Trigger image generation */
|
|
43
|
+
generate: (input: ImageGenerateInput) => Promise<void>;
|
|
44
|
+
/** The generation result containing images, or null */
|
|
45
|
+
result: Accessor<TOutput | null>;
|
|
46
|
+
/** Whether generation is in progress */
|
|
47
|
+
isLoading: Accessor<boolean>;
|
|
48
|
+
/** Current error, if any */
|
|
49
|
+
error: Accessor<Error | undefined>;
|
|
50
|
+
/** Current state of the generation */
|
|
51
|
+
status: Accessor<GenerationClientState>;
|
|
52
|
+
/** Abort the current generation */
|
|
53
|
+
stop: () => void;
|
|
54
|
+
/** Clear result, error, and return to idle */
|
|
55
|
+
reset: () => void;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Solid hook for generating images using AI models.
|
|
59
|
+
*
|
|
60
|
+
* Supports two transport modes:
|
|
61
|
+
* - **ConnectionAdapter** -- Streaming transport (SSE, HTTP stream, custom)
|
|
62
|
+
* - **Fetcher** -- Direct async function call
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* ```tsx
|
|
66
|
+
* import { useGenerateImage } from '@tanstack/ai-solid'
|
|
67
|
+
* import { fetchServerSentEvents } from '@tanstack/ai-client'
|
|
68
|
+
*
|
|
69
|
+
* function ImageGenerator() {
|
|
70
|
+
* const { generate, result, isLoading, error, reset } = useGenerateImage({
|
|
71
|
+
* connection: fetchServerSentEvents('/api/generate/image'),
|
|
72
|
+
* })
|
|
73
|
+
*
|
|
74
|
+
* return (
|
|
75
|
+
* <div>
|
|
76
|
+
* <button onClick={() => generate({ prompt: 'A sunset over mountains' })}>
|
|
77
|
+
* Generate
|
|
78
|
+
* </button>
|
|
79
|
+
* {isLoading() && <p>Generating...</p>}
|
|
80
|
+
* {error() && <p>Error: {error()!.message}</p>}
|
|
81
|
+
* {result()?.images.map((img, i) => (
|
|
82
|
+
* <img src={img.url || `data:image/png;base64,${img.b64Json}`} />
|
|
83
|
+
* ))}
|
|
84
|
+
* </div>
|
|
85
|
+
* )
|
|
86
|
+
* }
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
declare function useGenerateImage<TOnResult extends ((result: ImageGenerationResult) => any) | undefined = undefined>(options: Omit<UseGenerateImageOptions, 'onResult'> & {
|
|
90
|
+
onResult?: TOnResult;
|
|
91
|
+
}): UseGenerateImageReturn<InferGenerationOutput<ImageGenerationResult, TOnResult>>;
|
|
92
|
+
//#endregion
|
|
93
|
+
export { UseGenerateImageOptions, UseGenerateImageReturn, useGenerateImage };
|
|
94
|
+
//# sourceMappingURL=use-generate-image.d.ts.map
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { useGeneration } from "./use-generation.js";
|
|
2
|
+
|
|
3
|
+
//#region src/use-generate-image.ts
|
|
4
|
+
/**
|
|
5
|
+
* Solid hook for generating images using AI models.
|
|
6
|
+
*
|
|
7
|
+
* Supports two transport modes:
|
|
8
|
+
* - **ConnectionAdapter** -- Streaming transport (SSE, HTTP stream, custom)
|
|
9
|
+
* - **Fetcher** -- Direct async function call
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* import { useGenerateImage } from '@tanstack/ai-solid'
|
|
14
|
+
* import { fetchServerSentEvents } from '@tanstack/ai-client'
|
|
15
|
+
*
|
|
16
|
+
* function ImageGenerator() {
|
|
17
|
+
* const { generate, result, isLoading, error, reset } = useGenerateImage({
|
|
18
|
+
* connection: fetchServerSentEvents('/api/generate/image'),
|
|
19
|
+
* })
|
|
20
|
+
*
|
|
21
|
+
* return (
|
|
22
|
+
* <div>
|
|
23
|
+
* <button onClick={() => generate({ prompt: 'A sunset over mountains' })}>
|
|
24
|
+
* Generate
|
|
25
|
+
* </button>
|
|
26
|
+
* {isLoading() && <p>Generating...</p>}
|
|
27
|
+
* {error() && <p>Error: {error()!.message}</p>}
|
|
28
|
+
* {result()?.images.map((img, i) => (
|
|
29
|
+
* <img src={img.url || `data:image/png;base64,${img.b64Json}`} />
|
|
30
|
+
* ))}
|
|
31
|
+
* </div>
|
|
32
|
+
* )
|
|
33
|
+
* }
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
function useGenerateImage(options) {
|
|
37
|
+
const { generate, result, isLoading, error, status, stop, reset } = useGeneration(options);
|
|
38
|
+
return {
|
|
39
|
+
generate,
|
|
40
|
+
result,
|
|
41
|
+
isLoading,
|
|
42
|
+
error,
|
|
43
|
+
status,
|
|
44
|
+
stop,
|
|
45
|
+
reset
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
//#endregion
|
|
50
|
+
export { useGenerateImage };
|
|
51
|
+
//# sourceMappingURL=use-generate-image.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-generate-image.js","names":[],"sources":["../src/use-generate-image.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { ImageGenerationResult, StreamChunk } from '@tanstack/ai'\nimport type {\n ConnectionAdapter,\n GenerationClientState,\n GenerationFetcher,\n ImageGenerateInput,\n InferGenerationOutput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateImage hook.\n *\n * @template TOutput - The transformed output type (defaults to ImageGenerationResult)\n */\nexport interface UseGenerateImageOptions<TOutput = ImageGenerationResult> {\n /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */\n connection?: ConnectionAdapter\n /** Direct async function for image generation */\n fetcher?: GenerationFetcher<ImageGenerateInput, ImageGenerationResult>\n /** Unique identifier for this generation instance */\n id?: string\n /** Additional body parameters to send with ConnectionAdapter requests */\n body?: Record<string, any>\n /**\n * Callback when images are generated. Can optionally return a transformed value.\n *\n * - Return a non-null value to transform and store it as the result\n * - Return `null` to keep the previous result unchanged\n * - Return nothing (`void`) to store the raw result as-is\n */\n onResult?: (result: ImageGenerationResult) => TOutput | null | void\n /** Callback when an error occurs */\n onError?: (error: Error) => void\n /** Callback when progress is reported (0-100) */\n onProgress?: (progress: number, message?: string) => void\n /** Callback for each stream chunk (ConnectionAdapter mode only) */\n onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useGenerateImage hook.\n *\n * @template TOutput - The transformed output type (defaults to ImageGenerationResult)\n */\nexport interface UseGenerateImageReturn<TOutput = ImageGenerationResult> {\n /** Trigger image generation */\n generate: (input: ImageGenerateInput) => Promise<void>\n /** The generation result containing images, or null */\n result: Accessor<TOutput | null>\n /** Whether generation is in progress */\n isLoading: Accessor<boolean>\n /** Current error, if any */\n error: Accessor<Error | undefined>\n /** Current state of the generation */\n status: Accessor<GenerationClientState>\n /** Abort the current generation */\n stop: () => void\n /** Clear result, error, and return to idle */\n reset: () => void\n}\n\n/**\n * Solid hook for generating images using AI models.\n *\n * Supports two transport modes:\n * - **ConnectionAdapter** -- Streaming transport (SSE, HTTP stream, custom)\n * - **Fetcher** -- Direct async function call\n *\n * @example\n * ```tsx\n * import { useGenerateImage } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function ImageGenerator() {\n * const { generate, result, isLoading, error, reset } = useGenerateImage({\n * connection: fetchServerSentEvents('/api/generate/image'),\n * })\n *\n * return (\n * <div>\n * <button onClick={() => generate({ prompt: 'A sunset over mountains' })}>\n * Generate\n * </button>\n * {isLoading() && <p>Generating...</p>}\n * {error() && <p>Error: {error()!.message}</p>}\n * {result()?.images.map((img, i) => (\n * <img src={img.url || `data:image/png;base64,${img.b64Json}`} />\n * ))}\n * </div>\n * )\n * }\n * ```\n */\nexport function useGenerateImage<\n TOnResult extends ((result: ImageGenerationResult) => any) | undefined =\n undefined,\n>(\n options: Omit<UseGenerateImageOptions, 'onResult'> & {\n onResult?: TOnResult\n },\n): UseGenerateImageReturn<\n InferGenerationOutput<ImageGenerationResult, TOnResult>\n> {\n const { generate, result, isLoading, error, status, stop, reset } =\n useGeneration<ImageGenerateInput, ImageGenerationResult, TOnResult>(options)\n\n return {\n generate: generate as (input: ImageGenerateInput) => Promise<void>,\n result,\n isLoading,\n error,\n status,\n stop,\n reset,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAgB,iBAId,SAKA;CACA,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAoE,QAAQ;AAE9E,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { Accessor } from "solid-js";
|
|
2
|
+
import { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SpeechGenerateInput } from "@tanstack/ai-client";
|
|
3
|
+
import { StreamChunk, TTSResult } from "@tanstack/ai";
|
|
4
|
+
|
|
5
|
+
//#region src/use-generate-speech.d.ts
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Options for the useGenerateSpeech hook.
|
|
9
|
+
*
|
|
10
|
+
* @template TOutput - The transformed output type (defaults to TTSResult)
|
|
11
|
+
*/
|
|
12
|
+
interface UseGenerateSpeechOptions<TOutput = TTSResult> {
|
|
13
|
+
/** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
|
|
14
|
+
connection?: ConnectionAdapter;
|
|
15
|
+
/** Direct async function for speech generation */
|
|
16
|
+
fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>;
|
|
17
|
+
/** Unique identifier for this generation instance */
|
|
18
|
+
id?: string;
|
|
19
|
+
/** Additional body parameters to send with ConnectionAdapter requests */
|
|
20
|
+
body?: Record<string, any>;
|
|
21
|
+
/**
|
|
22
|
+
* Callback when speech is generated. Can optionally return a transformed value.
|
|
23
|
+
*
|
|
24
|
+
* - Return a non-null value to transform and store it as the result
|
|
25
|
+
* - Return `null` to keep the previous result unchanged
|
|
26
|
+
* - Return nothing (`void`) to store the raw result as-is
|
|
27
|
+
*/
|
|
28
|
+
onResult?: (result: TTSResult) => TOutput | null | void;
|
|
29
|
+
/** Callback when an error occurs */
|
|
30
|
+
onError?: (error: Error) => void;
|
|
31
|
+
/** Callback when progress is reported (0-100) */
|
|
32
|
+
onProgress?: (progress: number, message?: string) => void;
|
|
33
|
+
/** Callback for each stream chunk (ConnectionAdapter mode only) */
|
|
34
|
+
onChunk?: (chunk: StreamChunk) => void;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Return type for the useGenerateSpeech hook.
|
|
38
|
+
*
|
|
39
|
+
* @template TOutput - The transformed output type (defaults to TTSResult)
|
|
40
|
+
*/
|
|
41
|
+
interface UseGenerateSpeechReturn<TOutput = TTSResult> {
|
|
42
|
+
/** Trigger speech generation */
|
|
43
|
+
generate: (input: SpeechGenerateInput) => Promise<void>;
|
|
44
|
+
/** The TTS result containing audio data, or null */
|
|
45
|
+
result: Accessor<TOutput | null>;
|
|
46
|
+
/** Whether generation is in progress */
|
|
47
|
+
isLoading: Accessor<boolean>;
|
|
48
|
+
/** Current error, if any */
|
|
49
|
+
error: Accessor<Error | undefined>;
|
|
50
|
+
/** Current state of the generation */
|
|
51
|
+
status: Accessor<GenerationClientState>;
|
|
52
|
+
/** Abort the current generation */
|
|
53
|
+
stop: () => void;
|
|
54
|
+
/** Clear result, error, and return to idle */
|
|
55
|
+
reset: () => void;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Solid hook for generating speech (text-to-speech) using AI models.
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* ```tsx
|
|
62
|
+
* import { useGenerateSpeech } from '@tanstack/ai-solid'
|
|
63
|
+
* import { fetchServerSentEvents } from '@tanstack/ai-client'
|
|
64
|
+
*
|
|
65
|
+
* function SpeechGenerator() {
|
|
66
|
+
* const { generate, result, isLoading } = useGenerateSpeech({
|
|
67
|
+
* connection: fetchServerSentEvents('/api/generate/speech'),
|
|
68
|
+
* })
|
|
69
|
+
*
|
|
70
|
+
* return (
|
|
71
|
+
* <div>
|
|
72
|
+
* <button onClick={() => generate({ text: 'Hello world', voice: 'alloy' })}>
|
|
73
|
+
* Generate Speech
|
|
74
|
+
* </button>
|
|
75
|
+
* {result() && (
|
|
76
|
+
* <audio src={`data:audio/${result()!.format};base64,${result()!.audio}`} controls />
|
|
77
|
+
* )}
|
|
78
|
+
* </div>
|
|
79
|
+
* )
|
|
80
|
+
* }
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
declare function useGenerateSpeech<TOnResult extends ((result: TTSResult) => any) | undefined = undefined>(options: Omit<UseGenerateSpeechOptions, 'onResult'> & {
|
|
84
|
+
onResult?: TOnResult;
|
|
85
|
+
}): UseGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>>;
|
|
86
|
+
//#endregion
|
|
87
|
+
export { UseGenerateSpeechOptions, UseGenerateSpeechReturn, useGenerateSpeech };
|
|
88
|
+
//# sourceMappingURL=use-generate-speech.d.ts.map
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { useGeneration } from "./use-generation.js";
|
|
2
|
+
|
|
3
|
+
//#region src/use-generate-speech.ts
|
|
4
|
+
/**
|
|
5
|
+
* Solid hook for generating speech (text-to-speech) using AI models.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import { useGenerateSpeech } from '@tanstack/ai-solid'
|
|
10
|
+
* import { fetchServerSentEvents } from '@tanstack/ai-client'
|
|
11
|
+
*
|
|
12
|
+
* function SpeechGenerator() {
|
|
13
|
+
* const { generate, result, isLoading } = useGenerateSpeech({
|
|
14
|
+
* connection: fetchServerSentEvents('/api/generate/speech'),
|
|
15
|
+
* })
|
|
16
|
+
*
|
|
17
|
+
* return (
|
|
18
|
+
* <div>
|
|
19
|
+
* <button onClick={() => generate({ text: 'Hello world', voice: 'alloy' })}>
|
|
20
|
+
* Generate Speech
|
|
21
|
+
* </button>
|
|
22
|
+
* {result() && (
|
|
23
|
+
* <audio src={`data:audio/${result()!.format};base64,${result()!.audio}`} controls />
|
|
24
|
+
* )}
|
|
25
|
+
* </div>
|
|
26
|
+
* )
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
function useGenerateSpeech(options) {
|
|
31
|
+
const { generate, result, isLoading, error, status, stop, reset } = useGeneration(options);
|
|
32
|
+
return {
|
|
33
|
+
generate,
|
|
34
|
+
result,
|
|
35
|
+
isLoading,
|
|
36
|
+
error,
|
|
37
|
+
status,
|
|
38
|
+
stop,
|
|
39
|
+
reset
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
//#endregion
|
|
44
|
+
export { useGenerateSpeech };
|
|
45
|
+
//# sourceMappingURL=use-generate-speech.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-generate-speech.js","names":[],"sources":["../src/use-generate-speech.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { StreamChunk, TTSResult } from '@tanstack/ai'\nimport type {\n ConnectionAdapter,\n GenerationClientState,\n GenerationFetcher,\n InferGenerationOutput,\n SpeechGenerateInput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateSpeech hook.\n *\n * @template TOutput - The transformed output type (defaults to TTSResult)\n */\nexport interface UseGenerateSpeechOptions<TOutput = TTSResult> {\n /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */\n connection?: ConnectionAdapter\n /** Direct async function for speech generation */\n fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>\n /** Unique identifier for this generation instance */\n id?: string\n /** Additional body parameters to send with ConnectionAdapter requests */\n body?: Record<string, any>\n /**\n * Callback when speech is generated. Can optionally return a transformed value.\n *\n * - Return a non-null value to transform and store it as the result\n * - Return `null` to keep the previous result unchanged\n * - Return nothing (`void`) to store the raw result as-is\n */\n onResult?: (result: TTSResult) => TOutput | null | void\n /** Callback when an error occurs */\n onError?: (error: Error) => void\n /** Callback when progress is reported (0-100) */\n onProgress?: (progress: number, message?: string) => void\n /** Callback for each stream chunk (ConnectionAdapter mode only) */\n onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useGenerateSpeech hook.\n *\n * @template TOutput - The transformed output type (defaults to TTSResult)\n */\nexport interface UseGenerateSpeechReturn<TOutput = TTSResult> {\n /** Trigger speech generation */\n generate: (input: SpeechGenerateInput) => Promise<void>\n /** The TTS result containing audio data, or null */\n result: Accessor<TOutput | null>\n /** Whether generation is in progress */\n isLoading: Accessor<boolean>\n /** Current error, if any */\n error: Accessor<Error | undefined>\n /** Current state of the generation */\n status: Accessor<GenerationClientState>\n /** Abort the current generation */\n stop: () => void\n /** Clear result, error, and return to idle */\n reset: () => void\n}\n\n/**\n * Solid hook for generating speech (text-to-speech) using AI models.\n *\n * @example\n * ```tsx\n * import { useGenerateSpeech } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function SpeechGenerator() {\n * const { generate, result, isLoading } = useGenerateSpeech({\n * connection: fetchServerSentEvents('/api/generate/speech'),\n * })\n *\n * return (\n * <div>\n * <button onClick={() => generate({ text: 'Hello world', voice: 'alloy' })}>\n * Generate Speech\n * </button>\n * {result() && (\n * <audio src={`data:audio/${result()!.format};base64,${result()!.audio}`} controls />\n * )}\n * </div>\n * )\n * }\n * ```\n */\nexport function useGenerateSpeech<\n TOnResult extends ((result: TTSResult) => any) | undefined = undefined,\n>(\n options: Omit<UseGenerateSpeechOptions, 'onResult'> & {\n onResult?: TOnResult\n },\n): UseGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>> {\n const { generate, result, isLoading, error, status, stop, reset } =\n useGeneration<SpeechGenerateInput, TTSResult, TOnResult>(options)\n\n return {\n generate: generate as (input: SpeechGenerateInput) => Promise<void>,\n result,\n isLoading,\n error,\n status,\n stop,\n reset,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,SAAgB,kBAGd,SAGsE;CACtE,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAyD,QAAQ;AAEnE,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { Accessor } from "solid-js";
|
|
2
|
+
import { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo } from "@tanstack/ai-client";
|
|
3
|
+
import { StreamChunk } from "@tanstack/ai";
|
|
4
|
+
|
|
5
|
+
//#region src/use-generate-video.d.ts
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Options for the useGenerateVideo hook.
|
|
9
|
+
*
|
|
10
|
+
* @template TOutput - The transformed output type (defaults to VideoGenerateResult)
|
|
11
|
+
*/
|
|
12
|
+
interface UseGenerateVideoOptions<TOutput = VideoGenerateResult> {
|
|
13
|
+
/** Connection adapter for streaming transport (server handles polling) */
|
|
14
|
+
connection?: ConnectionAdapter;
|
|
15
|
+
/** Direct async function that returns a completed video result */
|
|
16
|
+
fetcher?: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>;
|
|
17
|
+
/** Unique identifier for this generation instance */
|
|
18
|
+
id?: string;
|
|
19
|
+
/** Additional body parameters to send with ConnectionAdapter requests */
|
|
20
|
+
body?: Record<string, any>;
|
|
21
|
+
/**
|
|
22
|
+
* Callback when video generation completes. Can optionally return a transformed value.
|
|
23
|
+
*
|
|
24
|
+
* - Return a non-null value to transform and store it as the result
|
|
25
|
+
* - Return `null` to keep the previous result unchanged
|
|
26
|
+
* - Return nothing (`void`) to store the raw result as-is
|
|
27
|
+
*/
|
|
28
|
+
onResult?: (result: VideoGenerateResult) => TOutput | null | void;
|
|
29
|
+
/** Callback when an error occurs */
|
|
30
|
+
onError?: (error: Error) => void;
|
|
31
|
+
/** Callback when progress is reported (0-100) */
|
|
32
|
+
onProgress?: (progress: number, message?: string) => void;
|
|
33
|
+
/** Callback when a video job is created */
|
|
34
|
+
onJobCreated?: (jobId: string) => void;
|
|
35
|
+
/** Callback on each status update */
|
|
36
|
+
onStatusUpdate?: (status: VideoStatusInfo) => void;
|
|
37
|
+
/** Callback for each stream chunk (ConnectionAdapter mode only) */
|
|
38
|
+
onChunk?: (chunk: StreamChunk) => void;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Return type for the useGenerateVideo hook.
|
|
42
|
+
*
|
|
43
|
+
* @template TOutput - The transformed output type (defaults to VideoGenerateResult)
|
|
44
|
+
*/
|
|
45
|
+
interface UseGenerateVideoReturn<TOutput = VideoGenerateResult> {
|
|
46
|
+
/** Trigger video generation */
|
|
47
|
+
generate: (input: VideoGenerateInput) => Promise<void>;
|
|
48
|
+
/** The final video result (with URL), or null */
|
|
49
|
+
result: Accessor<TOutput | null>;
|
|
50
|
+
/** The current job ID, or null */
|
|
51
|
+
jobId: Accessor<string | null>;
|
|
52
|
+
/** Current video generation status info, or null */
|
|
53
|
+
videoStatus: Accessor<VideoStatusInfo | null>;
|
|
54
|
+
/** Whether generation/polling is in progress */
|
|
55
|
+
isLoading: Accessor<boolean>;
|
|
56
|
+
/** Current error, if any */
|
|
57
|
+
error: Accessor<Error | undefined>;
|
|
58
|
+
/** Current state of the generation */
|
|
59
|
+
status: Accessor<GenerationClientState>;
|
|
60
|
+
/** Abort the current generation/polling */
|
|
61
|
+
stop: () => void;
|
|
62
|
+
/** Clear all state and return to idle */
|
|
63
|
+
reset: () => void;
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Solid hook for generating videos using AI models.
|
|
67
|
+
*
|
|
68
|
+
* Video generation is asynchronous: a job is created, then polled for status
|
|
69
|
+
* until completion. This hook handles the full lifecycle.
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* ```tsx
|
|
73
|
+
* import { useGenerateVideo } from '@tanstack/ai-solid'
|
|
74
|
+
* import { fetchServerSentEvents } from '@tanstack/ai-client'
|
|
75
|
+
*
|
|
76
|
+
* function VideoGenerator() {
|
|
77
|
+
* const { generate, result, videoStatus, isLoading } = useGenerateVideo({
|
|
78
|
+
* connection: fetchServerSentEvents('/api/generate/video'),
|
|
79
|
+
* onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),
|
|
80
|
+
* })
|
|
81
|
+
*
|
|
82
|
+
* return (
|
|
83
|
+
* <div>
|
|
84
|
+
* <button onClick={() => generate({ prompt: 'A flying car over a city' })}>
|
|
85
|
+
* Generate Video
|
|
86
|
+
* </button>
|
|
87
|
+
* {isLoading() && videoStatus() && (
|
|
88
|
+
* <p>Status: {videoStatus()!.status} ({videoStatus()!.progress}%)</p>
|
|
89
|
+
* )}
|
|
90
|
+
* {result() && <video src={result()!.url} controls />}
|
|
91
|
+
* </div>
|
|
92
|
+
* )
|
|
93
|
+
* }
|
|
94
|
+
* ```
|
|
95
|
+
*/
|
|
96
|
+
declare function useGenerateVideo<TOnResult extends ((result: VideoGenerateResult) => any) | undefined = undefined>(options: Omit<UseGenerateVideoOptions, 'onResult'> & {
|
|
97
|
+
onResult?: TOnResult;
|
|
98
|
+
}): UseGenerateVideoReturn<InferGenerationOutput<VideoGenerateResult, TOnResult>>;
|
|
99
|
+
//#endregion
|
|
100
|
+
export { UseGenerateVideoOptions, UseGenerateVideoReturn, useGenerateVideo };
|
|
101
|
+
//# sourceMappingURL=use-generate-video.d.ts.map
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { createEffect, createMemo, createSignal, createUniqueId } from "solid-js";
|
|
2
|
+
import { VideoGenerationClient } from "@tanstack/ai-client";
|
|
3
|
+
|
|
4
|
+
//#region src/use-generate-video.ts
|
|
5
|
+
/**
|
|
6
|
+
* Solid hook for generating videos using AI models.
|
|
7
|
+
*
|
|
8
|
+
* Video generation is asynchronous: a job is created, then polled for status
|
|
9
|
+
* until completion. This hook handles the full lifecycle.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* import { useGenerateVideo } from '@tanstack/ai-solid'
|
|
14
|
+
* import { fetchServerSentEvents } from '@tanstack/ai-client'
|
|
15
|
+
*
|
|
16
|
+
* function VideoGenerator() {
|
|
17
|
+
* const { generate, result, videoStatus, isLoading } = useGenerateVideo({
|
|
18
|
+
* connection: fetchServerSentEvents('/api/generate/video'),
|
|
19
|
+
* onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),
|
|
20
|
+
* })
|
|
21
|
+
*
|
|
22
|
+
* return (
|
|
23
|
+
* <div>
|
|
24
|
+
* <button onClick={() => generate({ prompt: 'A flying car over a city' })}>
|
|
25
|
+
* Generate Video
|
|
26
|
+
* </button>
|
|
27
|
+
* {isLoading() && videoStatus() && (
|
|
28
|
+
* <p>Status: {videoStatus()!.status} ({videoStatus()!.progress}%)</p>
|
|
29
|
+
* )}
|
|
30
|
+
* {result() && <video src={result()!.url} controls />}
|
|
31
|
+
* </div>
|
|
32
|
+
* )
|
|
33
|
+
* }
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
function useGenerateVideo(options) {
|
|
37
|
+
const hookId = createUniqueId();
|
|
38
|
+
const clientId = options.id || hookId;
|
|
39
|
+
const [result, setResult] = createSignal(null);
|
|
40
|
+
const [jobId, setJobId] = createSignal(null);
|
|
41
|
+
const [videoStatus, setVideoStatus] = createSignal(null);
|
|
42
|
+
const [isLoading, setIsLoading] = createSignal(false);
|
|
43
|
+
const [error, setError] = createSignal(void 0);
|
|
44
|
+
const [status, setStatus] = createSignal("idle");
|
|
45
|
+
const client = createMemo(() => {
|
|
46
|
+
const baseOptions = {
|
|
47
|
+
id: clientId,
|
|
48
|
+
body: options.body,
|
|
49
|
+
onResult: (r) => options.onResult?.(r),
|
|
50
|
+
onError: (e) => options.onError?.(e),
|
|
51
|
+
onProgress: (p, m) => options.onProgress?.(p, m),
|
|
52
|
+
onChunk: (c) => options.onChunk?.(c),
|
|
53
|
+
onJobCreated: (id) => options.onJobCreated?.(id),
|
|
54
|
+
onStatusUpdate: (s) => options.onStatusUpdate?.(s),
|
|
55
|
+
onResultChange: setResult,
|
|
56
|
+
onLoadingChange: setIsLoading,
|
|
57
|
+
onErrorChange: setError,
|
|
58
|
+
onStatusChange: setStatus,
|
|
59
|
+
onJobIdChange: setJobId,
|
|
60
|
+
onVideoStatusChange: setVideoStatus
|
|
61
|
+
};
|
|
62
|
+
if (options.connection) return new VideoGenerationClient({
|
|
63
|
+
...baseOptions,
|
|
64
|
+
connection: options.connection
|
|
65
|
+
});
|
|
66
|
+
if (options.fetcher) return new VideoGenerationClient({
|
|
67
|
+
...baseOptions,
|
|
68
|
+
fetcher: options.fetcher
|
|
69
|
+
});
|
|
70
|
+
throw new Error("useGenerateVideo requires either a connection or fetcher option");
|
|
71
|
+
}, [clientId]);
|
|
72
|
+
createEffect(() => {
|
|
73
|
+
const currentBody = options.body;
|
|
74
|
+
client().updateOptions({ body: currentBody });
|
|
75
|
+
});
|
|
76
|
+
createEffect(() => {
|
|
77
|
+
return () => {
|
|
78
|
+
client().stop();
|
|
79
|
+
};
|
|
80
|
+
});
|
|
81
|
+
const generate = async (input) => {
|
|
82
|
+
await client().generate(input);
|
|
83
|
+
};
|
|
84
|
+
const stop = () => {
|
|
85
|
+
client().stop();
|
|
86
|
+
};
|
|
87
|
+
const reset = () => {
|
|
88
|
+
client().reset();
|
|
89
|
+
};
|
|
90
|
+
return {
|
|
91
|
+
generate,
|
|
92
|
+
result,
|
|
93
|
+
jobId,
|
|
94
|
+
videoStatus,
|
|
95
|
+
isLoading,
|
|
96
|
+
error,
|
|
97
|
+
status,
|
|
98
|
+
stop,
|
|
99
|
+
reset
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
//#endregion
|
|
104
|
+
export { useGenerateVideo };
|
|
105
|
+
//# sourceMappingURL=use-generate-video.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-generate-video.js","names":[],"sources":["../src/use-generate-video.ts"],"sourcesContent":["import { VideoGenerationClient } from '@tanstack/ai-client'\nimport {\n createEffect,\n createMemo,\n createSignal,\n createUniqueId,\n} from 'solid-js'\nimport type { StreamChunk } from '@tanstack/ai'\nimport type {\n ConnectionAdapter,\n GenerationClientState,\n GenerationFetcher,\n InferGenerationOutput,\n VideoGenerateInput,\n VideoGenerateResult,\n VideoStatusInfo,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateVideo hook.\n *\n * @template TOutput - The transformed output type (defaults to VideoGenerateResult)\n */\nexport interface UseGenerateVideoOptions<TOutput = VideoGenerateResult> {\n /** Connection adapter for streaming transport (server handles polling) */\n connection?: ConnectionAdapter\n /** Direct async function that returns a completed video result */\n fetcher?: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>\n /** Unique identifier for this generation instance */\n id?: string\n /** Additional body parameters to send with ConnectionAdapter requests */\n body?: Record<string, any>\n /**\n * Callback when video generation completes. Can optionally return a transformed value.\n *\n * - Return a non-null value to transform and store it as the result\n * - Return `null` to keep the previous result unchanged\n * - Return nothing (`void`) to store the raw result as-is\n */\n onResult?: (result: VideoGenerateResult) => TOutput | null | void\n /** Callback when an error occurs */\n onError?: (error: Error) => void\n /** Callback when progress is reported (0-100) */\n onProgress?: (progress: number, message?: string) => void\n /** Callback when a video job is created */\n onJobCreated?: (jobId: string) => void\n /** Callback on each status update */\n onStatusUpdate?: (status: VideoStatusInfo) => void\n /** Callback for each stream chunk (ConnectionAdapter mode only) */\n onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useGenerateVideo hook.\n *\n * @template TOutput - The transformed output type (defaults to VideoGenerateResult)\n */\nexport interface UseGenerateVideoReturn<TOutput = VideoGenerateResult> {\n /** Trigger video generation */\n generate: (input: VideoGenerateInput) => Promise<void>\n /** The final video result (with URL), or null */\n result: Accessor<TOutput | null>\n /** The current job ID, or null */\n jobId: Accessor<string | null>\n /** Current video generation status info, or null */\n videoStatus: Accessor<VideoStatusInfo | null>\n /** Whether generation/polling is in progress */\n isLoading: Accessor<boolean>\n /** Current error, if any */\n error: Accessor<Error | undefined>\n /** Current state of the generation */\n status: Accessor<GenerationClientState>\n /** Abort the current generation/polling */\n stop: () => void\n /** Clear all state and return to idle */\n reset: () => void\n}\n\n/**\n * Solid hook for generating videos using AI models.\n *\n * Video generation is asynchronous: a job is created, then polled for status\n * until completion. This hook handles the full lifecycle.\n *\n * @example\n * ```tsx\n * import { useGenerateVideo } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function VideoGenerator() {\n * const { generate, result, videoStatus, isLoading } = useGenerateVideo({\n * connection: fetchServerSentEvents('/api/generate/video'),\n * onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),\n * })\n *\n * return (\n * <div>\n * <button onClick={() => generate({ prompt: 'A flying car over a city' })}>\n * Generate Video\n * </button>\n * {isLoading() && videoStatus() && (\n * <p>Status: {videoStatus()!.status} ({videoStatus()!.progress}%)</p>\n * )}\n * {result() && <video src={result()!.url} controls />}\n * </div>\n * )\n * }\n * ```\n */\nexport function useGenerateVideo<\n TOnResult extends ((result: VideoGenerateResult) => any) | undefined =\n undefined,\n>(\n options: Omit<UseGenerateVideoOptions, 'onResult'> & {\n onResult?: TOnResult\n },\n): UseGenerateVideoReturn<\n InferGenerationOutput<VideoGenerateResult, TOnResult>\n> {\n type TOutput = InferGenerationOutput<VideoGenerateResult, TOnResult>\n const hookId = createUniqueId()\n const clientId = options.id || hookId\n\n const [result, setResult] = createSignal<TOutput | null>(null)\n const [jobId, setJobId] = createSignal<string | null>(null)\n const [videoStatus, setVideoStatus] = createSignal<VideoStatusInfo | null>(\n null,\n )\n const [isLoading, setIsLoading] = createSignal(false)\n const [error, setError] = createSignal<Error | undefined>(undefined)\n const [status, setStatus] = createSignal<GenerationClientState>('idle')\n\n const client = createMemo(() => {\n const baseOptions = {\n id: clientId,\n body: options.body,\n onResult: (r: VideoGenerateResult) => options.onResult?.(r),\n onError: (e: Error) => options.onError?.(e),\n onProgress: (p: number, m?: string) => options.onProgress?.(p, m),\n onChunk: (c: StreamChunk) => options.onChunk?.(c),\n onJobCreated: (id: string) => options.onJobCreated?.(id),\n onStatusUpdate: (s: VideoStatusInfo) => options.onStatusUpdate?.(s),\n onResultChange: setResult,\n onLoadingChange: setIsLoading,\n onErrorChange: setError,\n onStatusChange: setStatus,\n onJobIdChange: setJobId,\n onVideoStatusChange: setVideoStatus,\n }\n\n if (options.connection) {\n return new VideoGenerationClient<TOutput>({\n ...baseOptions,\n connection: options.connection,\n })\n }\n\n if (options.fetcher) {\n return new VideoGenerationClient<TOutput>({\n ...baseOptions,\n fetcher: options.fetcher,\n })\n }\n\n throw new Error(\n 'useGenerateVideo requires either a connection or fetcher option',\n )\n }, [clientId])\n\n // Sync body changes without recreating client\n createEffect(() => {\n const currentBody = options.body\n client().updateOptions({ body: currentBody })\n })\n\n // Cleanup on unmount: stop any in-flight requests\n createEffect(() => {\n return () => {\n client().stop()\n }\n })\n\n const generate = async (input: VideoGenerateInput) => {\n await client().generate(input)\n }\n\n const stop = () => {\n client().stop()\n }\n\n const reset = () => {\n client().reset()\n }\n\n return {\n generate,\n result,\n jobId,\n videoStatus,\n isLoading,\n error,\n status,\n stop,\n reset,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,SAAgB,iBAId,SAKA;CAEA,MAAM,SAAS,gBAAgB;CAC/B,MAAM,WAAW,QAAQ,MAAM;CAE/B,MAAM,CAAC,QAAQ,aAAa,aAA6B,KAAK;CAC9D,MAAM,CAAC,OAAO,YAAY,aAA4B,KAAK;CAC3D,MAAM,CAAC,aAAa,kBAAkB,aACpC,KACD;CACD,MAAM,CAAC,WAAW,gBAAgB,aAAa,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,aAAgC,OAAU;CACpE,MAAM,CAAC,QAAQ,aAAa,aAAoC,OAAO;CAEvE,MAAM,SAAS,iBAAiB;EAC9B,MAAM,cAAc;GAClB,IAAI;GACJ,MAAM,QAAQ;GACd,WAAW,MAA2B,QAAQ,WAAW,EAAE;GAC3D,UAAU,MAAa,QAAQ,UAAU,EAAE;GAC3C,aAAa,GAAW,MAAe,QAAQ,aAAa,GAAG,EAAE;GACjE,UAAU,MAAmB,QAAQ,UAAU,EAAE;GACjD,eAAe,OAAe,QAAQ,eAAe,GAAG;GACxD,iBAAiB,MAAuB,QAAQ,iBAAiB,EAAE;GACnE,gBAAgB;GAChB,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,eAAe;GACf,qBAAqB;GACtB;AAED,MAAI,QAAQ,WACV,QAAO,IAAI,sBAA+B;GACxC,GAAG;GACH,YAAY,QAAQ;GACrB,CAAC;AAGJ,MAAI,QAAQ,QACV,QAAO,IAAI,sBAA+B;GACxC,GAAG;GACH,SAAS,QAAQ;GAClB,CAAC;AAGJ,QAAM,IAAI,MACR,kEACD;IACA,CAAC,SAAS,CAAC;AAGd,oBAAmB;EACjB,MAAM,cAAc,QAAQ;AAC5B,UAAQ,CAAC,cAAc,EAAE,MAAM,aAAa,CAAC;GAC7C;AAGF,oBAAmB;AACjB,eAAa;AACX,WAAQ,CAAC,MAAM;;GAEjB;CAEF,MAAM,WAAW,OAAO,UAA8B;AACpD,QAAM,QAAQ,CAAC,SAAS,MAAM;;CAGhC,MAAM,aAAa;AACjB,UAAQ,CAAC,MAAM;;CAGjB,MAAM,cAAc;AAClB,UAAQ,CAAC,OAAO;;AAGlB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { Accessor } from "solid-js";
|
|
2
|
+
import { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from "@tanstack/ai-client";
|
|
3
|
+
import { StreamChunk } from "@tanstack/ai";
|
|
4
|
+
|
|
5
|
+
//#region src/use-generation.d.ts
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Options for the useGeneration hook.
|
|
9
|
+
*
|
|
10
|
+
* Accepts either a `connection` (streaming transport) or a `fetcher` (direct async call).
|
|
11
|
+
*
|
|
12
|
+
* @template TInput - The input type for the generation request
|
|
13
|
+
* @template TResult - The result type returned by the generation
|
|
14
|
+
* @template TOutput - The transformed output type (defaults to TResult)
|
|
15
|
+
*/
|
|
16
|
+
interface UseGenerationOptions<TInput, TResult, TOutput = TResult> {
|
|
17
|
+
/** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
|
|
18
|
+
connection?: ConnectionAdapter;
|
|
19
|
+
/** Direct async function for one-shot generation (no streaming protocol needed) */
|
|
20
|
+
fetcher?: GenerationFetcher<TInput, TResult>;
|
|
21
|
+
/** Unique identifier for this generation instance */
|
|
22
|
+
id?: string;
|
|
23
|
+
/** Additional body parameters to send with ConnectionAdapter requests */
|
|
24
|
+
body?: Record<string, any>;
|
|
25
|
+
/**
|
|
26
|
+
* Callback when a result is received. Can optionally return a transformed value.
|
|
27
|
+
*
|
|
28
|
+
* - Return a non-null value to transform and store it as the result
|
|
29
|
+
* - Return `null` to keep the previous result unchanged
|
|
30
|
+
* - Return nothing (`void`) to store the raw result as-is
|
|
31
|
+
*/
|
|
32
|
+
onResult?: (result: TResult) => TOutput | null | void;
|
|
33
|
+
/** Callback when an error occurs */
|
|
34
|
+
onError?: (error: Error) => void;
|
|
35
|
+
/** Callback when progress is reported (0-100) */
|
|
36
|
+
onProgress?: (progress: number, message?: string) => void;
|
|
37
|
+
/** Callback for each stream chunk (ConnectionAdapter mode only) */
|
|
38
|
+
onChunk?: (chunk: StreamChunk) => void;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Return type for the useGeneration hook.
|
|
42
|
+
*
|
|
43
|
+
* @template TOutput - The output type (possibly transformed from the raw result)
|
|
44
|
+
*/
|
|
45
|
+
interface UseGenerationReturn<TOutput> {
|
|
46
|
+
/** Trigger a generation request */
|
|
47
|
+
generate: (input: Record<string, any>) => Promise<void>;
|
|
48
|
+
/** The generation result, or null if not yet generated */
|
|
49
|
+
result: Accessor<TOutput | null>;
|
|
50
|
+
/** Whether a generation is currently in progress */
|
|
51
|
+
isLoading: Accessor<boolean>;
|
|
52
|
+
/** Current error, if any */
|
|
53
|
+
error: Accessor<Error | undefined>;
|
|
54
|
+
/** Current state of the generation client */
|
|
55
|
+
status: Accessor<GenerationClientState>;
|
|
56
|
+
/** Abort the current generation */
|
|
57
|
+
stop: () => void;
|
|
58
|
+
/** Clear result, error, and return to idle */
|
|
59
|
+
reset: () => void;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Generic Solid hook for one-shot generation tasks.
|
|
63
|
+
*
|
|
64
|
+
* This is the base hook used by `useGenerateImage`, `useGenerateSpeech`,
|
|
65
|
+
* `useTranscription`, and `useSummarize`. You can also use it directly
|
|
66
|
+
* for custom generation types.
|
|
67
|
+
*
|
|
68
|
+
* @template TInput - The input type for the generation request
|
|
69
|
+
* @template TResult - The result type returned by the generation
|
|
70
|
+
* @template TOutput - The transformed output type (defaults to TResult)
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* ```tsx
|
|
74
|
+
* const { generate, result, isLoading } = useGeneration<MyInput, MyResult>({
|
|
75
|
+
* connection: fetchServerSentEvents('/api/generate/custom'),
|
|
76
|
+
* })
|
|
77
|
+
*
|
|
78
|
+
* await generate({ prompt: 'Hello' })
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
declare function useGeneration<TInput extends Record<string, any>, TResult, TOnResult extends ((result: TResult) => any) | undefined = undefined>(options: Omit<UseGenerationOptions<TInput, TResult>, 'onResult'> & {
|
|
82
|
+
onResult?: TOnResult;
|
|
83
|
+
}): UseGenerationReturn<InferGenerationOutput<TResult, TOnResult>>;
|
|
84
|
+
//#endregion
|
|
85
|
+
export { UseGenerationOptions, UseGenerationReturn, useGeneration };
|
|
86
|
+
//# sourceMappingURL=use-generation.d.ts.map
|