✨ Added a blackbox AI

vanpelt commented 1 month ago

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 commented 1 month ago

@gooroodev please review

gooroodev commented 1 month ago

@admsev, thanks for the nudge!

Summary of Changes

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.
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

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.
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

In blackbox.py:

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

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")

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.`;

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.

wandb / openui