Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ Added a blackbox AI #121

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

✨ Added a blackbox AI #121

wants to merge 1 commit into from

Conversation

HellFiveOsborn
Copy link

No description provided.

@vanpelt
Copy link
Contributor

vanpelt commented May 20, 2024

Hey @HellFiveOsborn thanks for the big PR. Unfortunately it's now caused a number of conflicts. Additionally I'm not familiar with Blackbox AI. Can you share more context about why we would want to support this?

@admsev
Copy link

admsev commented May 26, 2024

@gooroodev please review

@gooroodev
Copy link

@admsev, thanks for the nudge!

Summary of Changes

  1. Backend Changes:

    • Added blackbox.py file in the backend to handle interactions with the Blackbox AI service.
    • Updated evaluate_weave.py, prompt_to_img.py, and server.py to integrate Blackbox AI.
    • Introduced new functions to convert data between OpenAI and Blackbox formats and to stream responses from Blackbox.

  2. Frontend Changes:

    • Updated openai.ts to include Blackbox AI in the model options and adapt the prompt handling for Blackbox.
    • Added a new component CodeViewerFull.tsx for viewing code in fullscreen.
    • Modified CodeViewer.tsx to include the fullscreen viewing option.
    • Updated Examples.tsx and Settings.tsx to include Blackbox AI in the examples and settings.
    • Enhanced Builder.tsx to handle Blackbox AI responses and maintain session history.

Issues, Bugs, and Typos

  1. General:

    • Inconsistent Quotes: Both single and double quotes are used inconsistently. It's better to standardize on one for consistency.
    • Console Logs: There are several console.log and console.debug statements that may not be needed in the production code.

  2. Specific Issues:

    • blackbox.py:

      • json.loads(json.dumps(data)) is redundant. You can directly use data.
      • The generator function inside blackbox_stream_generator should be refactored to avoid nested functions and improve readability.
      • The openai_to_blackbox function has unnecessary complexity in handling image URLs and base64 decoding.

    • evaluate_weave.py and prompt_to_img.py:

      • No major issues found.

    • server.py:

      • The create_blackbox_completion call in the chat_completions function should handle exceptions to avoid crashing the server.

    • openai.ts:

      • The systemPrompt string has inconsistent formatting and unnecessary complexity.
      • The createOrRefine function has some redundant code that could be refactored.

    • Builder.tsx:

      • The onSubmit function has nested state updates that could be refactored for clarity.
      • The streamResponse function could be simplified to avoid deep nesting.

Proposed Improvements

  1. In blackbox.py:

    async def create_blackbox_completion(data: dict) -> AsyncStream[ChatCompletionChunk]:
    data = {
        ...
        "userSystemPrompt": data[0]["content"],
        ...
    }
    ...

  2. In server.py:

    async def chat_completions(...):
    ...
    try:
        response = await create_blackbox_completion(openai_to_blackbox(data))
        return StreamingResponse(response, media_type="text/event-stream")
    except Exception as e:
        logger.error("Error in Blackbox completion: %s", e)
        raise HTTPException(status=500, detail="Internal server error")

  3. In openai.ts:

    export const systemPrompt = `You are a web frontend developer specializing in $FRAMEWORK. Given a description or an image, generate HTML with $FRAMEWORK. You must support dark and light mode. It should render very well on desktop, tablet, and mobile. Keep your answers concise and just return HTML that would appear in <body>. Use placehold.co for placeholder images. If the user asks for interactivity, use modern ES6 JavaScript and native browser APIs to handle events. Do not generate SVGs; instead, use an image tag with an alt attribute of the same descriptive name, i.e., <img aria-hidden="true" alt="check" src="/icons/check.svg" />. IMPORTANT: Do not return suggestions or explanations about the code.`;

  4. In Builder.tsx:

    const onSubmit = async (e: React.FormEvent | React.KeyboardEvent) => {
    e.preventDefault();
    const query = queryRef.current?.value.trim() ?? '';
    if (!screenshot && !query) return;

    if (action === 'create') {
        newComponent(query, !screenshot);
        return;
    }

    setMarkdown('');
    setItem(it => ({
        ...it,
        markdown: it.markdown + newChapter(query),
        prompts: [...(it.prompts ?? [it.prompt]), query],
        history: [
            ...(it.history ?? []),
            { role: 'user', content: query },
            { role: 'assistant', content: it.markdown + newChapter(query) }
        ]
    }));
    streamResponse(query, pureHTML, false, item.history);
};

General Review of Code Quality and Style

  • Consistency: The code should use consistent formatting and naming conventions.
  • Readability: Some functions are deeply nested and could benefit from refactoring to improve readability.
  • Error Handling: Ensure all asynchronous operations have proper error handling to avoid unexpected crashes.
  • Comments: Add more comments to explain complex logic, especially in the backend integration with Blackbox AI.
  • Console Logs: Remove or replace console.log statements with proper logging mechanisms before deploying to production.

Overall, the code introduces significant new functionality with the integration of Blackbox AI and maintains a clear structure. With a few improvements, the code can be made more robust and maintainable.

Yours, Gooroo.dev. I'd love a reaction or reply to know your thoughts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@HellFiveOsborn @vanpelt @admsev @gooroodev