Merge PR #473: Move podcast estimate calculation to backend pricing catalog

2026-04-19 16:30:38 +05:30
parent 196ea65af9 e71cf65802
commit 5f13ee5f7b
9 changed files with 258 additions and 108 deletions
--- a/frontend/src/components/PodcastMaker/CreateModal.tsx
+++ b/frontend/src/components/PodcastMaker/CreateModal.tsx
@@ -253,26 +253,6 @@ export const CreateModal: React.FC<CreateModalProps> = ({ onCreate, open, defaul
    setShowAIDetailsButton(topicInput.trim().length > 0 && !isUrl);
  }, [topicInput, isUrl]);

-  // Calculate estimated cost
-  const estimatedCost = useMemo(() => {
-    const chars = Math.max(1000, duration * 900); // ~900 chars per minute
-    const secs = duration * 60;
-    
-    const ttsCost = (chars / 1000) * 0.05;
-    const avatarCost = speakers * 0.15;
-    const videoRate = knobs.bitrate === 'hd' ? 0.06 : 0.03;
-    const videoCost = secs * videoRate;
-    const researchCost = 0.3; // Fixed research cost
-    
-    return {
-      ttsCost: +ttsCost.toFixed(2),
-      avatarCost: +avatarCost.toFixed(2),
-      videoCost: +videoCost.toFixed(2),
-      researchCost: +researchCost.toFixed(2),
-      total: +(ttsCost + avatarCost + videoCost + researchCost).toFixed(2),
-    };
-  }, [duration, speakers, knobs.bitrate, knobs.scene_length_target]);
-
  // Check if avatar is present (from any source: upload, brand avatar, or generated)
  const hasAvatar = Boolean(
    avatarFile ||                         // User uploaded an image
@@ -560,7 +540,7 @@ export const CreateModal: React.FC<CreateModalProps> = ({ onCreate, open, defaul
              placeholderIndex={placeholderIndex}
              loading={enhancingTopic}
              loadingMessage={enhanceTopicMessage}
-              estimatedCost={estimatedCost}
+              estimatedCost={null}
              duration={duration}
              speakers={speakers}
              knobs={knobs}
--- a/frontend/src/components/PodcastMaker/CreateStep/TopicUrlInput.tsx
+++ b/frontend/src/components/PodcastMaker/CreateStep/TopicUrlInput.tsx
@@ -27,7 +27,7 @@ interface TopicUrlInputProps {
    videoCost: number;
    researchCost: number;
    total: number;
-  };
+  } | null;
  duration?: number;
  speakers?: number;
  knobs?: Knobs;
@@ -115,9 +115,9 @@ export const TopicUrlInput: React.FC<TopicUrlInputProps> = ({
            </Typography>
          </Stack>
          
-          {estimatedCost && (
-            <Tooltip
-              title={
+          <Tooltip
+            title={
+              estimatedCost ? (
                <Box>
                  <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
                    Estimated Cost Breakdown:
@@ -135,43 +135,49 @@ export const TopicUrlInput: React.FC<TopicUrlInputProps> = ({
                    </Typography>
                  </Typography>
                </Box>
-              }
-              arrow
-              placement="top"
-              componentsProps={{
-                tooltip: {
-                  sx: {
-                    bgcolor: "#0f172a",
-                    color: "#ffffff",
-                    maxWidth: 280,
-                    fontSize: "0.875rem",
-                    p: 1.5,
-                    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-                  },
+              ) : (
+                "Estimate unavailable until returned by the server."
+              )
+            }
+            arrow
+            placement="top"
+            componentsProps={{
+              tooltip: {
+                sx: {
+                  bgcolor: "#0f172a",
+                  color: "#ffffff",
+                  maxWidth: 280,
+                  fontSize: "0.875rem",
+                  p: 1.5,
+                  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
                },
-                arrow: {
-                  sx: {
-                    color: "#0f172a",
-                  },
+              },
+              arrow: {
+                sx: {
+                  color: "#0f172a",
                },
+              },
+            }}
+          >
+            <Chip
+              icon={<AttachMoneyIcon sx={{ fontSize: "0.875rem !important" }} />}
+              label={estimatedCost ? `Est. $${estimatedCost.total}` : "Est. Unavailable"}
+              size="small"
+              sx={{
+                background: estimatedCost
+                  ? "linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%)"
+                  : "rgba(100, 116, 139, 0.12)",
+                color: estimatedCost ? "#059669" : "#475569",
+                fontWeight: 600,
+                border: estimatedCost
+                  ? "1px solid rgba(16, 185, 129, 0.2)"
+                  : "1px solid rgba(100, 116, 139, 0.25)",
+                fontSize: "0.75rem",
+                height: 26,
+                cursor: "help",
              }}
-            >
-              <Chip 
-                icon={<AttachMoneyIcon sx={{ fontSize: "0.875rem !important" }} />}
-                label={`Est. $${estimatedCost.total}`} 
-                size="small"
-                sx={{
-                  background: "linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%)",
-                  color: "#059669",
-                  fontWeight: 600,
-                  border: "1px solid rgba(16, 185, 129, 0.2)",
-                  fontSize: "0.75rem",
-                  height: 26,
-                  cursor: "help",
-                }}
-              />
-            </Tooltip>
-          )}
+            />
+          </Tooltip>
        </Stack>
        <Tooltip
          title={
--- a/frontend/src/components/PodcastMaker/PodcastDashboard/usePodcastWorkflow.ts
+++ b/frontend/src/components/PodcastMaker/PodcastDashboard/usePodcastWorkflow.ts
@@ -354,7 +354,7 @@ export const usePodcastWorkflow = ({ projectState, onError }: UsePodcastWorkflow
      try {
        console.log('[Research] Starting research with:', { topic: project.idea, approvedQueries, provider: researchProvider });
        console.log('[Research] Calling podcastApi.runResearch...');
-        const { research: mapped, raw } = await podcastApi.runResearch({
+        const { research: mapped, raw, estimate } = await podcastApi.runResearch({
          projectId: project.id,
          topic: project.idea,
          approvedQueries,
@@ -369,6 +369,9 @@ export const usePodcastWorkflow = ({ projectState, onError }: UsePodcastWorkflow
        console.log('[Research] Response received:', { mapped, raw });
        setResearch(mapped);
        setRawResearch(raw);
+        if (estimate) {
+          setEstimate(estimate);
+        }
        setAnnouncement("Research complete — review fact cards below");
      } catch (researchError) {
        const errorMessage = researchError instanceof Error
@@ -392,7 +395,7 @@ export const usePodcastWorkflow = ({ projectState, onError }: UsePodcastWorkflow
    } finally {
      setIsResearching(false);
    }
-  }, [isResearching, project, selectedQueries, queries, researchProvider, preflightCheck, analysis, setResearch, setRawResearch, setScriptData, setShowScriptEditor, setShowRenderQueue, projectState.bible]);
+  }, [isResearching, project, selectedQueries, queries, researchProvider, preflightCheck, analysis, setResearch, setRawResearch, setEstimate, setScriptData, setShowScriptEditor, setShowRenderQueue, projectState.bible]);

 // Add a ref to track if we're currently generating to prevent double calls
  const isGeneratingRef = useRef(false);
@@ -625,4 +628,3 @@ export const usePodcastWorkflow = ({ projectState, onError }: UsePodcastWorkflow
    handleDeleteQuery,
  };
 };
-
--- a/frontend/src/components/PodcastMaker/types.ts
+++ b/frontend/src/components/PodcastMaker/types.ts
@@ -196,7 +196,7 @@ export type CreateProjectPayload = {
 export type CreateProjectResult = {
  projectId: string;
  analysis: PodcastAnalysis;
-  estimate: PodcastEstimate;
+  estimate: PodcastEstimate | null;
  queries: Query[];
  bible?: PodcastBible;
  avatar_url?: string | null;
--- a/frontend/src/services/podcastApi.ts
+++ b/frontend/src/services/podcastApi.ts
@@ -59,39 +59,41 @@ const deriveSegments = (option?: OptionLike): string[] => {
  return segments.slice(0, 5);
 };

-const estimateCosts = ({
-  minutes,
-  scenes,
-  chars,
-  quality,
-  avatars,
-  queryCount = 3,
-  voiceId,
-}: {
-  minutes: number;
-  scenes: number;
-  chars: number;
-  quality: string;
-  avatars: number;
-  queryCount?: number;
-  voiceId?: string;
-}): PodcastEstimate => {
-  const secs = Math.max(60, minutes * 60);
-  const ttsCost = (chars / 1000) * 0.05;
-  const avatarCost = avatars * 0.15;
-  const videoRate = quality === "hd" ? 0.06 : 0.03;
-  const videoCost = secs * videoRate;
-  const researchCost = +(Math.max(1, queryCount) * 0.1).toFixed(2);
-  const total = +(ttsCost + avatarCost + videoCost + researchCost).toFixed(2);
-  const isCustomVoice = Boolean(voiceId && !["Wise_Woman", "Friendly_Person", "Inspirational_girl", "Deep_Voice_Man", "Calm_Woman", "Casual_Guy", "Lively_Girl", "Patient_Man", "Young_Knight", "Determined_Man", "Lovely_Girl", "Decent_Boy", "Imposing_Manner", "Elegant_Man", "Abbess", "Sweet_Girl_2", "Exuberant_Girl"].includes(voiceId));
-  const voiceName = isCustomVoice ? "My Voice Clone" : (!voiceId ? "Wise Woman" : voiceId.replace(/_/g, " "));
+const toPodcastEstimate = (raw: any, voiceId?: string): PodcastEstimate | null => {
+  if (!raw || typeof raw !== "object") return null;
+  const numeric = ["ttsCost", "avatarCost", "videoCost", "researchCost", "total"] as const;
+  if (numeric.some((key) => typeof raw[key] !== "number" || Number.isNaN(raw[key]))) {
+    return null;
+  }
+  const isCustomVoice = Boolean(
+    voiceId &&
+      ![
+        "Wise_Woman",
+        "Friendly_Person",
+        "Inspirational_girl",
+        "Deep_Voice_Man",
+        "Calm_Woman",
+        "Casual_Guy",
+        "Lively_Girl",
+        "Patient_Man",
+        "Young_Knight",
+        "Determined_Man",
+        "Lovely_Girl",
+        "Decent_Boy",
+        "Imposing_Manner",
+        "Elegant_Man",
+        "Abbess",
+        "Sweet_Girl_2",
+        "Exuberant_Girl",
+      ].includes(voiceId)
+  );
  return {
-    ttsCost: +ttsCost.toFixed(2),
-    avatarCost: +avatarCost.toFixed(2),
-    videoCost: +videoCost.toFixed(2),
-    researchCost,
-    total,
-    voiceName,
+    ttsCost: raw.ttsCost,
+    avatarCost: raw.avatarCost,
+    videoCost: raw.videoCost,
+    researchCost: raw.researchCost,
+    total: raw.total,
+    voiceName: isCustomVoice ? "My Voice Clone" : (!voiceId ? "Wise Woman" : voiceId.replace(/_/g, " ")),
    isCustomVoice,
  };
 };
@@ -173,12 +175,14 @@ const mapSourcesToFacts = (sources: ExaSource[]): Fact[] => {
 type ExaResearchResult = {
  sources: ExaSource[];
  search_queries?: string[];
-  cost_est?: {
+cost_est?: {
    total?: number;
    breakdown?: { phase: "Analyze" | "Gather" | "Write" | "Produce"; cost: number }[];
    currency?: "USD";
    last_updated?: string;
  };
+  cost?: { total?: number };
+  estimate?: PodcastEstimate | null;
  search_type?: string;
  provider?: string;
  content?: string;
@@ -302,15 +306,7 @@ export const podcastApi = {
    // so users can manually choose which queries to run

    const projectId = createId("podcast");
-    const estimate = estimateCosts({
-      minutes: payload.duration,
-      scenes: Math.ceil((payload.duration * 60) / (payload.knobs.scene_length_target || DEFAULT_KNOBS.scene_length_target)),
-      chars: Math.max(1000, payload.duration * 900),
-      quality: payload.knobs.bitrate || "standard",
-      avatars: payload.speakers,
-      queryCount: queries.length || 3,
-      voiceId: payload.knobs.voice_id,
-    });
+    const estimate = toPodcastEstimate(analysisResp.data?.estimate, payload.knobs.voice_id);

    return {
      projectId,
@@ -337,7 +333,7 @@ export const podcastApi = {
    bible?: any;
    analysis?: PodcastAnalysis | null;
    onProgress?: (message: string) => void;
-  }): Promise<{ research: Research; raw: any }> {
+  }): Promise<{ research: Research; raw: any; estimate?: PodcastEstimate | null }> {
    const keywords = params.approvedQueries.map((q) => q.query).filter(Boolean);
    if (!keywords.length) {
      throw new Error("At least one query must be approved for research.");
@@ -384,7 +380,11 @@ export const podcastApi = {
      params.onProgress("Deep research completed with Exa.");
    }
    const mapped = mapExaResearchResponse(exaResult);
-    return { research: mapped, raw: exaResult };
+    return {
+      research: mapped,
+      raw: exaResult,
+      estimate: toPodcastEstimate(exaResult.estimate, params.analysis?.suggestedKnobs?.voice_id),
+    };
  },

  async generateScript(params: {