नियमों के आधार पर इवैलुएशन बनाना

बुनियादी कामों को अपने-आप होने दें: सामान्य गड़बड़ियों का पता लगाने के लिए कोड का इस्तेमाल करें.

Maud Nalpas

अब आपको पता चल गया है कि नियम के आधार पर आकलन करने की सुविधा का इस्तेमाल करके, आपको किन गड़बड़ियों का पता लगाना है. इसलिए, अब समय आ गया है कि आकलन करने वाले फ़ंक्शन लागू किए जाएं:

  • evalDataFormat(): इससे यह पता चलता है कि डेटा का फ़ॉर्मैट सही है या नहीं. इसमें मान्य JSON, सभी कुंजियां मौजूद होना, कोई भी वैल्यू खाली न होना, आदर्श वाक्य छह शब्दों से कम होना, और हेक्साडेसिमल रंग शामिल हैं.
  • evalContrastRatio(): यह जांच करता है कि टेक्स्ट और बैकग्राउंड के रंग के कंट्रास्ट का अनुपात ऐक्सेस किया जा सकता है या नहीं.

नियमों के आधार पर आकलन करने की सुविधा लागू करना

आकलन के मानदंड बाइनरी होते हैं. नियमों के आधार पर आकलन करने वाले फ़ंक्शन से, बाइनरी आउटपुट मिलना चाहिए. जैसे, PASS या FAIL लेबल.

  • ThemeBuilder ऐप्लिकेशन का आउटपुट (पूरी थीम ऑब्जेक्ट) → evalDataFormat() → PASS या FAIL लेबल. PASS अगर डेटा फ़ॉर्मैट सभी शर्तों को पूरा करता है. अगर ऐसा नहीं है, तो FAIL का इस्तेमाल करें.
  • ThemeBuilder ऐप्लिकेशन का आउटपुट (कलर पैलेट ऑब्जेक्ट) → evalContrastRatio() → PASS या FAIL लेबल . अगर अनुपात 4.5 से ज़्यादा है, तो PASS. अगर ऐसा नहीं है, तो FAIL का इस्तेमाल करें.
होती है.

Evals टाइप तय करना

PASS या FAIL मेट्रिक एक बूलियन है. हालांकि, इसे स्ट्रिंग लेबल (कैटगरी) के तौर पर लागू किया जा सकता है, ताकि इसे आसानी से पढ़ा जा सके.

चीज़ों को आसान बनाने के लिए, अपने नियम-आधारित और एलएलएम जज के आकलन, दोनों के लिए एक ही TypeScript टाइप का इस्तेमाल किया जा सकता है. हालांकि, इसे बाद में लागू किया जाएगा. एक EvalResult टाइप बनाएं, जो बाइनरी EvalLabel कैटगरी और जज मॉडल के लिए rationale फ़ील्ड को रैप करता हो, ताकि वह अपनी रेटिंग के बारे में बता सके.

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

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

इवैल्यूएटर लागू करना

Zod, स्कीमा की पुष्टि करने का बेहतरीन टूल है. यह JSON स्ट्रक्चर और कस्टम नियमों, दोनों को मैनेज करता है. यह डिक्लेरेटिव है, जिससे पुष्टि करने वाले कोड को आसानी से पढ़ा जा सकता है. गड़बड़ी की पूरी जानकारी देने वाली रिपोर्ट तैयार करें. इसमें गड़बड़ी की वजहें और गड़बड़ी वाले पाथ की जानकारी दें, ताकि समस्या को आसानी से हल किया जा सके.

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)
});

कंट्रास्ट का अनुपात

डोमेन लॉजिक, जैसे कि कंट्रास्ट रेशियो की कैलकुलेशन को अलग-अलग यूटिलिटी फ़ंक्शन में रखें.

/*
 * 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() और evalContrastRatio() के लिए, हमारा इवैल्यूएटर कोड देखें.

नियम के आधार पर किए जाने वाले आकलन की जांच करना

नियमों पर आधारित आकलन, तय किए गए नियमों के हिसाब से काम करते हैं. इसलिए, इनके व्यवहार की जांच करने के लिए, क्लासिक यूनिट टेस्ट लागू किए जा सकते हैं. अपने टेस्ट बनाएं, ताकि अलग-अलग आउटपुट को आकलन करने वालों के ज़रिए चलाया जा सके. साथ ही, यह पुष्टि की जा सके कि वे आपके अनुमान के मुताबिक PASS या FAIL लेबल दिखाते हैं या नहीं.

अगर किसी टेस्ट केस में, आकलन करने वाले व्यक्ति से FAIL जवाब मिलने की उम्मीद की जाती है और उसे FAIL जवाब मिलता है, तो टेस्ट में PASS दिखता है. ऐसा इसलिए, क्योंकि आकलन करने वाले व्यक्ति ने उम्मीद के मुताबिक काम किया.

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;
 // ...
});

इसे आज़माएं

पीछे जाएं
डिज़ाइन की समीक्षाएं
आगे बढ़ें
पार्ट 1