@umituz/react-native-ai-generation-content 1.17.1 → 1.17.3

package/src/features/text-to-voice/infrastructure/services/index.ts

@@ -0,0 +1,5 @@
+export {
+  executeTextToVoice,
+  hasTextToVoiceSupport,
+} from "./text-to-voice-executor";
+export type { ExecuteTextToVoiceOptions } from "./text-to-voice-executor";

package/src/features/text-to-voice/infrastructure/services/text-to-voice-executor.ts

@@ -0,0 +1,111 @@
+/**
+ * Text-to-Voice Executor
+ * Provider-agnostic text-to-voice execution using active AI provider
+ */
+
+import { providerRegistry } from "../../../../infrastructure/services";
+import type {
+  TextToVoiceRequest,
+  TextToVoiceResult,
+  TextToVoiceInputBuilder,
+  TextToVoiceResultExtractor,
+} from "../../domain/types";
+
+declare const __DEV__: boolean;
+
+export interface ExecuteTextToVoiceOptions {
+  model: string;
+  buildInput: TextToVoiceInputBuilder;
+  extractResult?: TextToVoiceResultExtractor;
+  onProgress?: (progress: number) => void;
+}
+
+function defaultExtractResult(
+  result: unknown,
+): { audioUrl?: string; duration?: number } | undefined {
+  if (typeof result !== "object" || result === null) return undefined;
+
+  const r = result as Record<string, unknown>;
+
+  if (typeof r.audio === "string") {
+    return { audioUrl: r.audio };
+  }
+
+  if (typeof r.audio_url === "string") {
+    return { audioUrl: r.audio_url };
+  }
+
+  if (r.audio && typeof r.audio === "object") {
+    const audio = r.audio as Record<string, unknown>;
+    if (typeof audio.url === "string") {
+      return {
+        audioUrl: audio.url,
+        duration: typeof audio.duration === "number" ? audio.duration : undefined,
+      };
+    }
+  }
+
+  return undefined;
+}
+
+export async function executeTextToVoice(
+  request: TextToVoiceRequest,
+  options: ExecuteTextToVoiceOptions,
+): Promise<TextToVoiceResult> {
+  const provider = providerRegistry.getActiveProvider();
+
+  if (!provider) {
+    return { success: false, error: "No AI provider configured" };
+  }
+
+  if (!provider.isInitialized()) {
+    return { success: false, error: "AI provider not initialized" };
+  }
+
+  if (!request.text) {
+    return { success: false, error: "Text is required" };
+  }
+
+  const { model, buildInput, extractResult, onProgress } = options;
+
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.log(`[TextToVoice] Provider: ${provider.providerId}, Model: ${model}`);
+  }
+
+  try {
+    onProgress?.(10);
+
+    const input = buildInput(request.text, request.options);
+    onProgress?.(20);
+
+    const result = await provider.run(model, input);
+    onProgress?.(90);
+
+    const extractor = extractResult || defaultExtractResult;
+    const extracted = extractor(result);
+    onProgress?.(100);
+
+    if (!extracted?.audioUrl) {
+      return { success: false, error: "No audio in response" };
+    }
+
+    return {
+      success: true,
+      audioUrl: extracted.audioUrl,
+      duration: extracted.duration,
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.error("[TextToVoice] Error:", message);
+    }
+    return { success: false, error: message };
+  }
+}
+
+export function hasTextToVoiceSupport(): boolean {
+  const provider = providerRegistry.getActiveProvider();
+  return provider !== null && provider.isInitialized();
+}

package/src/features/text-to-voice/presentation/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useTextToVoiceFeature } from "./useTextToVoiceFeature";
+export type {
+  UseTextToVoiceFeatureProps,
+  UseTextToVoiceFeatureReturn,
+} from "./useTextToVoiceFeature";

package/src/features/text-to-voice/presentation/hooks/useTextToVoiceFeature.ts

@@ -0,0 +1,105 @@
+/**
+ * Text-to-Voice Feature Hook
+ * Provider-agnostic hook for text-to-voice generation
+ */
+
+import { useState, useCallback } from "react";
+import { executeTextToVoice } from "../../infrastructure/services";
+import type {
+  TextToVoiceFeatureState,
+  TextToVoiceFeatureConfig,
+  TextToVoiceResult,
+  TextToVoiceOptions,
+} from "../../domain/types";
+
+export interface UseTextToVoiceFeatureProps {
+  config: TextToVoiceFeatureConfig;
+  userId: string;
+}
+
+export interface UseTextToVoiceFeatureReturn {
+  state: TextToVoiceFeatureState;
+  setText: (text: string) => void;
+  generate: (options?: TextToVoiceOptions) => Promise<TextToVoiceResult>;
+  reset: () => void;
+  isReady: boolean;
+}
+
+const initialState: TextToVoiceFeatureState = {
+  text: "",
+  audioUrl: null,
+  isProcessing: false,
+  progress: 0,
+  error: null,
+};
+
+export function useTextToVoiceFeature(
+  props: UseTextToVoiceFeatureProps,
+): UseTextToVoiceFeatureReturn {
+  const { config, userId } = props;
+  const [state, setState] = useState<TextToVoiceFeatureState>(initialState);
+
+  const setText = useCallback(
+    (text: string) => {
+      setState((prev) => ({ ...prev, text, error: null }));
+      config.onTextChange?.(text);
+    },
+    [config],
+  );
+
+  const generate = useCallback(
+    async (options?: TextToVoiceOptions): Promise<TextToVoiceResult> => {
+      if (!state.text) {
+        const error = "Text is required";
+        setState((prev) => ({ ...prev, error }));
+        return { success: false, error };
+      }
+
+      setState((prev) => ({
+        ...prev,
+        isProcessing: true,
+        progress: 0,
+        error: null,
+      }));
+
+      config.onProcessingStart?.();
+
+      const result = await executeTextToVoice(
+        { text: state.text, userId, options },
+        {
+          model: config.model,
+          buildInput: config.buildInput,
+          extractResult: config.extractResult,
+          onProgress: (progress) => {
+            setState((prev) => ({ ...prev, progress }));
+          },
+        },
+      );
+
+      if (result.success && result.audioUrl) {
+        setState((prev) => ({
+          ...prev,
+          audioUrl: result.audioUrl ?? null,
+          isProcessing: false,
+          progress: 100,
+        }));
+      } else {
+        const error = result.error || "Generation failed";
+        setState((prev) => ({ ...prev, isProcessing: false, error }));
+        config.onError?.(error);
+      }
+
+      config.onProcessingComplete?.(result);
+      return result;
+    },
+    [state.text, userId, config],
+  );
+
+  const reset = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  const isReady = state.text.length > 0 && !state.isProcessing;
+
+  return { state, setText, generate, reset, isReady };
+}

package/src/features/text-to-voice/presentation/index.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/src/index.ts

@@ -353,3 +353,27 @@ export * from "./features/remove-background";
 
 export * from "./features/remove-object";
 
+// =============================================================================
+// FEATURES - Text-to-Video
+// =============================================================================
+
+export * from "./features/text-to-video";
+
+// =============================================================================
+// FEATURES - Text-to-Image
+// =============================================================================
+
+export * from "./features/text-to-image";
+
+// =============================================================================
+// FEATURES - Image-to-Video
+// =============================================================================
+
+export * from "./features/image-to-video";
+
+// =============================================================================
+// FEATURES - Text-to-Voice
+// =============================================================================
+
+export * from "./features/text-to-voice";
+

package/src/presentation/components/buttons/GenerateButton.tsx

@@ -0,0 +1,141 @@
+/**
+ * GenerateButton Component
+ * Generic AI generation button with gradient/solid variants
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+import { LinearGradient } from "expo-linear-gradient";
+
+export interface GenerateButtonProps {
+  readonly isDisabled?: boolean;
+  readonly isProcessing?: boolean;
+  readonly onPress: () => void;
+  readonly text: string;
+  readonly processingText?: string;
+  readonly variant?: "gradient" | "solid";
+  readonly gradientColors?: readonly [string, string, ...string[]];
+  readonly icon?: string;
+  readonly iconSize?: number;
+}
+
+export const GenerateButton: React.FC<GenerateButtonProps> = ({
+  isDisabled = false,
+  isProcessing = false,
+  onPress,
+  text,
+  processingText,
+  variant = "gradient",
+  gradientColors = ["#FF6B9D", "#C74375", "#FF6B9D"],
+  icon = "sparkles",
+  iconSize = 24,
+}) => {
+  const tokens = useAppDesignTokens();
+  const disabled = isDisabled || isProcessing;
+  const displayText = isProcessing && processingText ? processingText : text;
+
+  if (variant === "solid") {
+    return (
+      <View style={[styles.solidContainer, { marginTop: tokens.spacing.xl }]}>
+        <TouchableOpacity
+          onPress={onPress}
+          disabled={disabled}
+          activeOpacity={0.8}
+          style={[
+            styles.solidButton,
+            {
+              backgroundColor: disabled
+                ? tokens.colors.surfaceSecondary
+                : tokens.colors.primary,
+            },
+          ]}
+        >
+          <View style={styles.buttonContent}>
+            <AtomicIcon name={icon} customSize={20} customColor="#FFFFFF" />
+            <AtomicText type="bodyLarge" style={styles.solidButtonText}>
+              {displayText}
+            </AtomicText>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.gradientContainer, { marginTop: tokens.spacing.xl }]}>
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={disabled}
+        activeOpacity={0.85}
+        style={styles.buttonWrapper}
+      >
+        <LinearGradient
+          colors={disabled ? ["#9CA3AF", "#6B7280"] : gradientColors}
+          start={[0, 0]}
+          end={[1, 0]}
+          style={[styles.gradientButton, disabled && styles.disabledButton]}
+        >
+          <View style={styles.buttonContent}>
+            <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
+            <AtomicText type="bodyLarge" style={styles.gradientButtonText}>
+              {displayText}
+            </AtomicText>
+          </View>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientContainer: {
+    alignItems: "center",
+    paddingHorizontal: 16,
+  },
+  solidContainer: {
+    paddingHorizontal: 16,
+  },
+  buttonWrapper: {
+    width: "100%",
+    maxWidth: 320,
+    borderRadius: 30,
+  },
+  gradientButton: {
+    paddingVertical: 18,
+    paddingHorizontal: 32,
+    borderRadius: 30,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  solidButton: {
+    borderRadius: 16,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+  },
+  gradientButtonText: {
+    color: "#FFFFFF",
+    fontWeight: "700",
+    fontSize: 18,
+  },
+  solidButtonText: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
+});

package/src/presentation/components/buttons/index.ts

@@ -0,0 +1 @@
+export { GenerateButton, type GenerateButtonProps } from "./GenerateButton";

package/src/presentation/components/display/ErrorDisplay.tsx

@@ -0,0 +1,111 @@
+/**
+ * ErrorDisplay Component
+ * Generic error display with retry action
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+
+export interface ErrorDisplayProps {
+  readonly error: string | null;
+  readonly onRetry?: () => void;
+  readonly retryText?: string;
+  readonly icon?: string;
+}
+
+export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
+  error,
+  onRetry,
+  retryText,
+  icon = "alert-circle",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: `${tokens.colors.error}15`,
+          borderColor: `${tokens.colors.error}30`,
+          padding: tokens.spacing.md,
+          marginTop: tokens.spacing.md,
+        },
+      ]}
+    >
+      <View style={styles.header}>
+        <AtomicIcon
+          name={icon}
+          customSize={20}
+          customColor={tokens.colors.error}
+        />
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.errorText, { color: tokens.colors.error }]}
+        >
+          {error}
+        </AtomicText>
+      </View>
+      {onRetry && retryText && (
+        <TouchableOpacity
+          onPress={onRetry}
+          style={[
+            styles.retryButton,
+            {
+              backgroundColor: tokens.colors.error,
+              marginTop: tokens.spacing.sm,
+            },
+          ]}
+        >
+          <AtomicIcon
+            name="refresh"
+            customSize={16}
+            customColor={tokens.colors.onError}
+          />
+          <AtomicText
+            type="bodySmall"
+            style={{ color: tokens.colors.onError, fontWeight: "600" }}
+          >
+            {retryText}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+  },
+  errorText: {
+    flex: 1,
+    lineHeight: 20,
+  },
+  retryButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignSelf: "flex-start",
+  },
+});

package/src/presentation/components/display/ResultDisplay.tsx

@@ -0,0 +1,122 @@
+/**
+ * ResultDisplay Component
+ * Generic result display with save/reset actions
+ * Props-driven for 100+ apps compatibility
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
+
+export interface ResultDisplayAction {
+  readonly id: string;
+  readonly label: string;
+  readonly onPress: () => void;
+  readonly variant?: "primary" | "outline";
+  readonly icon?: string;
+}
+
+export interface ResultDisplayProps {
+  readonly visible?: boolean;
+  readonly successText: string;
+  readonly actions: ResultDisplayAction[];
+  readonly successIcon?: string;
+}
+
+export const ResultDisplay: React.FC<ResultDisplayProps> = ({
+  visible = true,
+  successText,
+  actions,
+  successIcon = "checkmark-circle",
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, { marginTop: tokens.spacing.lg }]}>
+      <View style={styles.successHeader}>
+        <AtomicIcon
+          name={successIcon}
+          customSize={24}
+          customColor={tokens.colors.success}
+        />
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {successText}
+        </AtomicText>
+      </View>
+      <View style={[styles.actionButtons, { gap: tokens.spacing.sm }]}>
+        {actions.map((action) => (
+          <AtomicButton
+            key={action.id}
+            onPress={action.onPress}
+            variant={action.variant === "outline" ? "outline" : undefined}
+            style={styles.actionButton}
+          >
+            <View style={styles.buttonContent}>
+              {action.icon && (
+                <AtomicIcon
+                  name={action.icon}
+                  customSize={18}
+                  customColor={
+                    action.variant === "outline"
+                      ? tokens.colors.primary
+                      : tokens.colors.onPrimary
+                  }
+                />
+              )}
+              <AtomicText
+                type="bodyMedium"
+                style={{
+                  color:
+                    action.variant === "outline"
+                      ? tokens.colors.primary
+                      : tokens.colors.onPrimary,
+                }}
+              >
+                {action.label}
+              </AtomicText>
+            </View>
+          </AtomicButton>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+  },
+  successHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 16,
+  },
+  successText: {
+    textAlign: "center",
+  },
+  actionButtons: {
+    width: "100%",
+    maxWidth: 280,
+  },
+  actionButton: {
+    flex: 1,
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+});

package/src/presentation/components/display/index.ts

@@ -0,0 +1,6 @@
+export {
+  ResultDisplay,
+  type ResultDisplayProps,
+  type ResultDisplayAction,
+} from "./ResultDisplay";
+export { ErrorDisplay, type ErrorDisplayProps } from "./ErrorDisplay";