Kural tabanlı değerlendirmeler oluşturma

Temel işlemleri otomatikleştirin: Basit hataları yakalamak için kod kullanın.

Maud Nalpas

Kural tabanlı değerlendirmelerle hangi hataları yakalamak istediğinizi öğrendiğinize göre artık ilgili değerlendirici işlevlerini uygulama zamanı:

  • evalDataFormat(): Veri biçiminin doğru olup olmadığını kontrol eder. Bu, geçerli JSON, tüm anahtarların mevcut olması, boş değer olmaması, sloganın altı kelimeden kısa olması ve onaltılık renkleri içerir.
  • evalContrastRatio(): Metin-arka plan rengi kontrast oranının erişilebilir olup olmadığını kontrol eder.

Kural tabanlı değerlendirmeleri uygulama

Puanlama yöntemi seçme

Değerlendirme ölçütleri ikilidir. Kural tabanlı değerlendirme işlevleriniz, PASS veya FAIL etiketi gibi ikili bir çıkış üretmelidir.

  • ThemeBuilder uygulama çıkışı (tam tema nesnesi) → evalDataFormat() → PASS veya FAIL etiketi. Veri biçimi tüm kısıtlamaları karşılıyorsa PASS. Aksi takdirde FAIL.
  • ThemeBuilder uygulama çıkışı (renk paleti nesnesi) → evalContrastRatio() → PASS veya FAIL etiketi .Oran 4,5'ten büyükse PASS. Aksi takdirde FAIL.

Değerlendirme türü tanımlama

PASS veya FAIL metriği bir Boole değeridir ancak okunabilirliği artırmak için dize etiketi (kategori) olarak uygulamayı seçebilirsiniz.

İşleri kolaylaştırmak için hem kural tabanlı hem de daha sonra uygulayacağınız LLM değerlendirmeleri için aynı TypeScript türünü kullanabilirsiniz. Bir EvalResult türü oluşturun. Bu tür, bir ikili EvalLabel kategorisini ve değerlendirme modelinin puanını açıklayacağı bir rationale alanı sarmalar.

enum EvalLabel {
    PASS = "PASS",
    FAIL = "FAIL"
}

interface EvalResult {
    label: EvalLabel;
    rationale?: string;
}

Değerlendiricileri uygulama

Zod, hem JSON yapısını hem de özel kuralları işlediği için şema doğrulama konusunda mükemmel bir araçtır. Bildirimseldir. Bu sayede doğrulama kodu okunabilir hale gelir. Daha kolay sorun giderme için başarısızlıkların belirli yollarını ve nedenlerini içeren ayrıntılı hata raporları tanımlayın.

import { z } from 'zod';
import { MAX_WORD_COUNT } from './app.config';

const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

// Reusable schema for hex colors
const HexColor = z.string().regex(hexColorRegex, { message: "Invalid hex color code" });

// zod schema definition for AppOutput
export const AppOutputSchema = z.object({
  motto: z.string().min(1, { message: "Motto is missing or empty" }).refine((val) => {
    const words = val.replace(/[^\w\s]|_/g, "").trim();
    const count = words ? words.split(/\s+/).length : 0;
    return count > 0 && count <= MAX_WORD_COUNT;
  }, { message: `Motto must be between 1 and ${MAX_WORD_COUNT} words` }),
  colorPalette: z.object({
    textColor: HexColor,
    backgroundColor: HexColor,
    primary: HexColor,
    secondary: HexColor
  }).catchall(HexColor)
});

Kontrast oranı

Kontrast oranı hesaplamaları gibi alan mantığını ayrı yardımcı işlevlerde tutun.

/*
 * Input: ColorPalette {"textColor":"#333333","backgroundColor":"#000000", ...}
 * Output: EvalResult {"status":"FAIL","rationale":"Contrast ratio is 1.66:1 (must be >= 4.5:1)."}
 * minContrastRatio is an app config variable, MIN_CONTRAST_RATIO = 4.5
*/
export function evalContrastRatio(colorPalette: ColorPalette, minContrastRatio: number): EvalResult {
  if (!colorPalette || !colorPalette.textColor || !colorPalette.backgroundColor) {
    return { status: EvalLabel.FAIL, rationale: "Missing textColor or backgroundColor." };
  }
  try {
    const ratio = getContrastRatio(colorPalette.textColor, colorPalette.backgroundColor);
    const rationale = `Contrast ratio is ${ratio.toFixed(2)}:1 (must be >= ${minContrastRatio}:1).`;
    if (ratio < minContrastRatio) {
      return { status: EvalLabel.FAIL, rationale };
    }
    return { status: EvalLabel.PASS, rationale };
  } catch (e) {
    return { status: EvalLabel.FAIL, rationale: "Could not calculate contrast ratio (invalid hex?)." };
  }
}

evalDataFormat() ve evalContrastRatio() için değerlendirici kodumuza göz atın.

Kurala dayalı değerlendirmeleri test etme

Kural tabanlı değerlendirmeler deterministiktir. Bu nedenle, davranışlarını kontrol etmek için klasik birim testleri uygulayabilirsiniz. Testlerinizi, çeşitli çıkışları değerlendiricilerden geçirecek ve beklediğiniz PASS veya FAIL etiketini döndürüp döndürmediklerini onaylayacak şekilde oluşturun.

Bir test senaryosu, değerlendiricinin FAIL döndürmesini bekliyorsa ve değerlendirici bunu yaparsa değerlendirici amaçlandığı gibi davrandığı için test PASS çıktısı verir.

import { MIN_CONTRAST_RATIO } from '../src/app.config'; // 4.5

const testCases = [
  {
  // ...
      appOutput: {
        motto: "Test motto",
        colorPalette: {
          textColor: "#333333",
          backgroundColor: "#000000",
          primary: "#FF0000",
          secondary: "#333333"
        }
      },
    expected: {
      // Dark grey on black (low contrast): FAIL
      contrast: EvalLabel.FAIL
    }
  }
  // ... more test cases
];

testCases.forEach((testCase) => {
  const result = evalContrastRatio(
    testCase.appOutput.colorPalette as any, MIN_CONTRAST_RATIO
  );
  const actualEvalLabel = result.label;
  const expectedEvalLabel = testCase.expected.contrast;
  const isSuccess = actualEvalLabel === expectedEvalLabel;
 // ...
});

Dene

Önceki
Tasarım değerlendirmeleri
Sonraki
1. Bölüm