最適化されたコード生成と表示のためのオープンWebUI

はじめに

WebUIを開く Artifacts OverhaulはOpen WebUIをベースにしたフォークプロジェクトで、開発者のNick Tonjumによって開発された。コード生成とプレゼンテーションのためのAIの機能改善に焦点を当てたオープンソースツールである。ユーザーはこのツールを使って、AIにコードを生成させ、その結果をインターフェイスで直接編集・表示させることができる。このツールはローカルのデプロイメントをサポートし、以下のものと互換性がある。 オーラマ 開発者がコードを素早くテストしたり、初心者がプログラミングを学ぶのに適している。このプロジェクトは現在ベータ版で、ユーザーはGitHubから無料でダウンロードできる。コードエディター、リアルタイムプレビュー、差分比較が可能で、複数のプログラミング言語をサポートしている。

機能一覧

• コードキャンバスAIが生成したコードは、VSCodeに似たモナコエディタを使って右側に表示され、ファイルやバージョンを切り替えることができます。
• 相違点の比較AI コードを修正する際、変更箇所をハイライトし、ワンクリックで比較ビューを切り替えます。
• デザイン・プレビューHTML、CSS、JavaScriptのリアルタイムプレビューをサポート。
• リアクト・サポートReactコンポーネントは、約80%の成功率で、直接プレビューすることができます。 export default.
• 多言語サポートJavaScript、Python、C#、Java、PHP、その他多くの言語に対応しています。
• ファイルビュー: チャット内のコードブロックは、管理しやすいようにファイルに表示されます。

ヘルプの使用

設置プロセス

Open WebUI Artifacts Overhaulにはローカルでの展開が必要です。以下は詳細なインストール手順です：

Dockerを使ったインストール

1. 環境のチェック
   • Dockerがインストールされ、実行されていることを確認する。
   • Nvidia GPUをお持ちの場合は、次のものをインストールする必要があります。 Nvidia CUDAツールキット.
2. プルコード
   • ターミナルを開き、プロジェクトをクローンする：

     git clone https://github.com/nick-tonjum/open-webui-artifacts-overhaul.git
     

   • カタログを見る

     cd open-webui-artifacts-overhaul
     

3. Dockerの実行
   • 基本コマンド（CPUモード）：

     docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:main
     

   • GPUを使用する場合：

     docker run -d -p 3000:8080 --gpus all -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:cuda
     

   • Ollamaとの統合：

     docker run -d -p 3000:8080 -v ollama:/root/.ollama -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:ollama
     

4. アクセスインターフェイス
   • インストールが完了したら、ブラウザを開き、次のように入力する。 http://localhost:3000.

Pythonでのインストール

1. 環境を整える
   • Python3.11または3.10をインストールする。Condaを使って環境を構築することを推奨する：

     conda create -n open-webui python=3.11
     conda activate open-webui
     

2. 依存関係のインストール
   • プロジェクトをクローンした後、カタログにアクセスする：

     cd open-webui-artifacts-overhaul
     

   • フロントエンドの依存関係をインストールします：

     npm install --no-package-lock
     npm install @floating-ui/utils
     npm run build
     

   • バックエンドのディレクトリに移動し、バックエンドの依存関係をインストールする：

     cd backend
     pip install -r requirements.txt
     

3. サービス開始
   • 走っている：

     ./start.sh
     

   • インタビュー http://localhost:8080.

AIモデルの設定

• オーラマ起動後、SettingsからローカルのOllamaアドレスを入力します。 http://localhost:11434).
• OpenAI APIDockerを使用する場合は、設定にAPIキーを入力するか、パラメータを追加してください：

  -e OPENAI_API_KEY=your_secret_key

主な機能

コードキャンバス

• チャットボックスに「ボタンのあるHTMLページを書いてください」など、要件を入力してください。
• AIがコードを生成すると、右側にエディターが表示される。
• ファイルやバージョンを切り替えるには、上部の矢印をクリックします。
• エディターで直接コードを変更し、保存してチャットを更新してください。

相違点の比較

• change button to green」と入力すると、AIが新しいコードを返す。
• 緑色の部分が追加、赤色の部分が削除です。
• 差分を閉じる」をクリックすると、通常の表示に戻ります。

デザイン・プレビュー

• HTMLまたは 反応 コードが表示されたら、"Design View "をクリックします。
• 右側にはボタンスタイルなどのウェブエフェクトが表示されます。
• Tailwindで書く <div>すると、赤い背景が見える。
• プレビューが機能するためには、Reactコンポーネントは構文的に正しい必要がある。

多言語サポート

• Pythonでソート関数を書く」のように言語を指定する。
• コードは右側に表示され、ローカルで実行するためのコピーに対応している。

操作例

1. コードの生成
   • 入力 : "時刻を表示するJavaScript関数を書いてください。"
   • 右のエディターはコードを表示する。
2. プレビュー効果
   • デザイン・ビュー」をクリックし、時刻の表示方法を確認する。
   • "change time font size "と入力すると、AIがコードを更新する。
3. 矛盾のチェック
   • Difference "ボタンをクリックすると、フォントサイズの変化を見ることができます。
   • 新しいバージョンを保存する。
4. 管理バージョン
   • 上部の "バージョン1 "と "バージョン2 "を切り替えて、変更点を比較することができます。

ほら

• このプロジェクトはベータ版であり、バグがあるかもしれません。問題が発生した場合はGitHubにIssueを提出してください。
• リアクトプレビュー成功率80%、複雑なコンポーネントは失敗する可能性があります。
• Dockerを使ってインストールすることをお勧めする。

このツールは直感的で、開発者はこれを使って素早くコードを生成し、テストすることができる。初心者はAIを通じてプログラミングのロジックを学ぶこともできる。

アプリケーションシナリオ

1. フロントエンド開発
   HTMLとCSSを生成し、その結果をリアルタイムでプレビューできる。
2. プログラミング学習
   簡単な要件を入力し、AIによって生成されたコードを観察し、それを修正して変更を確認する。
3. コードデバッギング
   AIによって変更されたコードを差分比較でチェックし、要件に準拠していることを確認する。

品質保証

1. 対応機種は？
   OllamaのネイティブモデルとOpenAIのAPIをサポート。
2. Reactのプレビューが失敗することがあるのはなぜですか？
   現在の成功率 80%、複雑なコード、または行方不明 export default エラーが出ます。開発者が改善中です。
3. バージョンアップの方法は？
   Dockerを使っている人は、Watchtowerを使うことができる：

   docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower --run-once open-webui