already generated but not show

[timchenxiaoyu]

[timchenxiaoyu]

change to Option 2 can see. this

[abi]

Which API keys do you have set up? Can you also paste in your backend logs?

[timchenxiaoyu]

openai and ANTHROPIC all set

[abi]

Can you also paste in your backend logs?

[lethanhson9901]

I got the same issue with Grok API (using litellm to host): litellm --model xai/grok-vision-beta

changed .env to: OPENAI_BASE_URL='http://host.docker.internal:4000'

and also modified docker-compose.yml file to connect:

version: '3.9'

services:
  backend:
    build: 
      context: ./backend
      dockerfile: Dockerfile
    extra_hosts:
      - "host.docker.internal:host-gateway"

For the log of docker-compose:

backend_1   | INFO:     ('172.18.0.1', 37362) - "WebSocket /generate-code" [accepted]
backend_1   | INFO:     connection open
backend_1   | INFO:     connection closed

I also debug in file frontend/src/generateCode.ts:

import toast from "react-hot-toast";
import { WS_BACKEND_URL } from "./config";
import {
  APP_ERROR_WEB_SOCKET_CODE,
  USER_CLOSE_WEB_SOCKET_CODE,
} from "./constants";
import { FullGenerationSettings } from "./types";

const ERROR_MESSAGE = "Error generating code. Check the Developer Console AND the backend logs for details. Feel free to open a Github issue.";
const CANCEL_MESSAGE = "Code generation cancelled";

export function generateCode(
  wsRef: React.MutableRefObject<WebSocket | null>,
  params: FullGenerationSettings,
  onChange: (chunk: string, variantIndex: number) => void,
  onSetCode: (code: string, variantIndex: number) => void,
  onStatusUpdate: (status: string, variantIndex: number) => void,
  onCancel: () => void,
  onComplete: () => void
) {
  const wsUrl = `${WS_BACKEND_URL}/generate-code`;
  console.log("[WS] Connecting to backend:", wsUrl);
  console.log("[WS] Params:", params);

  const ws = new WebSocket(wsUrl);
  wsRef.current = ws;

  ws.addEventListener("open", () => {
    console.log("[WS] Connection opened");
    console.log("[WS] Sending params:", params);
    ws.send(JSON.stringify(params));
  });

  ws.addEventListener("message", async (event: MessageEvent) => {
    const response = JSON.parse(event.data) as WebSocketResponse;
    console.log("[WS] Received message:", response);

    if (response.type === "chunk") {
      console.log(`[WS] Chunk received for variant ${response.variantIndex}:`, response.value);
      onChange(response.value, response.variantIndex);
    } else if (response.type === "status") {
      console.log(`[WS] Status update for variant ${response.variantIndex}:`, response.value);
      onStatusUpdate(response.value, response.variantIndex);
    } else if (response.type === "setCode") {
      console.log(`[WS] Setting code for variant ${response.variantIndex}:`, response.value);
      onSetCode(response.value, response.variantIndex);
    } else if (response.type === "error") {
      console.error("[WS] Error:", response.value);
      toast.error(response.value);
    }
  });

  ws.addEventListener("close", (event) => {
    console.log("[WS] Connection closed:", { code: event.code, reason: event.reason });
    
    if (event.code === USER_CLOSE_WEB_SOCKET_CODE) {
      console.log("[WS] User cancelled generation");
      toast.success(CANCEL_MESSAGE);
      onCancel();
    } else if (event.code === APP_ERROR_WEB_SOCKET_CODE) {
      console.error("[WS] Known server error:", event);
      onCancel();
    } else if (event.code !== 1000) {
      console.error("[WS] Unknown server or connection error:", event);
      toast.error(ERROR_MESSAGE);
      onCancel();
    } else {
      console.log("[WS] Generation completed successfully");
      onComplete();
    }
  });

  ws.addEventListener("error", (error) => {
    console.error("[WS] WebSocket error:", error);
    toast.error(ERROR_MESSAGE);
  });
}

and check console log, it generates successfully:

[timchenxiaoyu]

what's different between option 1 and option2 ？

[abi]

Option 1 is Sonnet 3.5. Option 2 is GPT4o