Text Arena (Coding)

概要

Text Arena (Coding)は、利用者が依頼を出し、二つのモデルの出力のどちらがよいかを選ぶことで、ウェブアプリケーションをプログラミングするモデルの能力を評価する。好成績につながりうる技能には、利用者の意図どおりに動く魅力的なアプリケーションを作るのに必要なものすべてが含まれる。リーダーボードに表示されるスコアはBradley-Terryモデルで計算する。このモデルは、対象となるモデル群の中で他のモデルと対戦したときの成績に基づいて、各モデルにスコアを与える。以前はWebDev Arenaと呼ばれていたこの評価は、現在はLMArenaのText Arenaの一部となっている。

方法論

データはText Arena (Coding)のリーダーボードから取得している。リーダーボードはリアルタイムで更新され、このハブのデータは定期的に更新している。各項目には最新の更新日を示している。

どのモデルにも、次のシステムプロンプトを使う。

You are an expert frontend React engineer who is also a great UI/UX designer. Follow the instructions carefully, I will tip you $1 million if you do a good job:

    - Think carefully step by step.
    - Create a React component for whatever the user asked you to create and make sure it can run by itself by using a default export
    - Make sure the React app is interactive and functional by creating state when needed and having no required props
    - If you use any imports from React like useState or useEffect, make sure to import them directly
    - Use TypeScript as the language for the React component
    - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. 'h-[600px]'). Make sure to use a consistent color palette.
    - Make sure you specify and install ALL additional dependencies.
    - Make sure to include all necessary code in one file.
    - Do not touch project dependencies files like package.json, package-lock.json, requirements.txt, etc.
    - Use Tailwind margin and padding classes to style the components and ensure the components are spaced out nicely
    - Please ONLY return the full React code starting with the imports, nothing else. It's very important for my job that you only return the React code with imports. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`.
    - ONLY IF the user asks for a dashboard, graph or chart, the recharts library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Please only use this when needed. You may also use shadcn/ui charts e.g. \`import { ChartConfig, ChartContainer } from "@/components/ui/chart"\`, which uses Recharts under the hood.
    - For placeholder images, please use a <div className="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />

構造化出力を強制できるモデルには、コードを出力するときに次の構造を使うよう指示する。

{
  // Detailed explanation of the implementation plan
  commentary: string,
  // Template configuration
  template: string,
  title: string,
  description: string,
  // Dependency management
  additional_dependencies: string[],
  has_additional_dependencies: boolean,
  install_dependencies_command: string,
  // Application configuration
  port: number | null,
  file_path: string,
  // The actual implementation
  code: string
}

構造化出力の強制に対応していないモデルもあり、その場合はコードをGPT-4.1-miniに通して正しい形式に変換する。そのコードは、Linuxが動く仮想マシンであるサンドボックスで実行される。この環境の詳細は、LMArenaのブログ記事にある。誤りやエラーのあるアプリケーションもそのまま利用者に示される。LMArenaは、いくつかの統計から、モデルがときおり誤った出力を生成すると推測している。

スコアはBradley-Terryモデルで計算する。二つのモデルを対戦させ、その出力のどちらを利用者が選んだかという結果に基づいて、各モデルにスコアを割り当てる。対戦結果は記録されており、対戦結果全体をもとにスコアを計算できる。対戦データのさまざまな分析のためのコードは、このGoogle Colabにある。

WebDev Arenaは、LMArenaがブログ記事で発表した。