"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelStandardsExample = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const model_registry_js_1 = require("../components/model-registry.js");
/**
 * Example component demonstrating the use of the model standards validation
 * with the ReelCode integration.
 */
const ModelStandardsExample = () => {
    // Sample model data
    const [modelData, setModelData] = (0, react_1.useState)({
        name: 'my-model-123',
        provider: 'anthropic',
        version: '1.0.0',
        description: 'A sample model for demonstration',
        parameters: {
            temperature: 0.7,
            max_tokens: 1024,
        },
        deployment_config: {
            environment: 'development',
            strategy: 'rolling',
            replicas: 1,
            auto_scaling: false
        }
    });
    const [validationResult, setValidationResult] = (0, react_1.useState)(null);
    // Handle validation results
    const handleValidationChange = (isValid, results) => {
        setValidationResult(results);
    };
    // Validate model manually
    const validateModel = () => {
        const results = (0, model_registry_js_1.validateModelStandards)(modelData);
        setValidationResult(results);
    };
    // Auto-fix model issues
    const autoFixModel = () => {
        const fixedModel = (0, model_registry_js_1.applyModelStandards)(modelData);
        setModelData(fixedModel);
        // Re-validate
        const results = (0, model_registry_js_1.validateModelStandards)(fixedModel);
        setValidationResult(results);
    };
    // Toggle production mode to demonstrate different validation rules
    const toggleEnvironment = () => {
        setModelData(prev => ({
            ...prev,
            deployment_config: {
                ...prev.deployment_config,
                environment: prev.deployment_config?.environment === 'production' ? 'development' : 'production'
            }
        }));
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-3xl mx-auto p-6", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold mb-6", children: "Model Standards Validation Example" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white shadow-md rounded-lg overflow-hidden mb-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-4", children: "Model Configuration" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", children: "Environment" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "mr-2", children: "Development" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleEnvironment, className: `relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 ${modelData.deployment_config?.environment === 'production' ? 'bg-blue-600' : 'bg-gray-200'}`, children: (0, jsx_runtime_1.jsx)("span", { className: `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${modelData.deployment_config?.environment === 'production' ? 'translate-x-5' : 'translate-x-0'}` }) }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: "Production" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Toggle to see how validation rules change for production environments" })] }), (0, jsx_runtime_1.jsx)("div", { className: "border border-gray-200 rounded-md p-4 bg-gray-50", children: (0, jsx_runtime_1.jsx)("pre", { className: "whitespace-pre-wrap text-sm", children: JSON.stringify(modelData, null, 2) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex space-x-4", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: validateModel, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700", children: "Validate Model" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: autoFixModel, className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700", children: "Auto-Fix Issues" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white shadow-md rounded-lg overflow-hidden mb-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-4", children: "Automatic Validation" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 mb-4", children: "The ModelStandardsValidator component automatically validates the model in real-time:" }), (0, jsx_runtime_1.jsx)(model_registry_js_1.ModelStandardsValidator, { model: modelData, onChange: handleValidationChange, showWarnings: true }), validationResult && validationResult.valid && validationResult.warnings.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 p-4 bg-green-50 border border-green-200 rounded-md text-green-700", children: "Model configuration is valid and follows all standards!" }))] }) }), validationResult && ((0, jsx_runtime_1.jsx)("div", { className: "bg-white shadow-md rounded-lg overflow-hidden", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-4", children: "Validation Results" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: `text-lg font-medium ${validationResult.valid ? 'text-green-600' : 'text-red-600'}`, children: [validationResult.valid ? 'Valid' : 'Invalid', " configuration"] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-gray-600", children: [validationResult.errors.length, " errors, ", validationResult.warnings.length, " warnings"] })] }), validationResult.errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-md font-medium text-red-700 mb-2", children: "Errors" }), (0, jsx_runtime_1.jsx)("ul", { className: "list-disc pl-5 space-y-1", children: validationResult.errors.map((error, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "text-red-600", children: [(0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [error.rule, ":"] }), " ", error.message] }, `error-${index}`))) })] })), validationResult.warnings.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-md font-medium text-yellow-700 mb-2", children: "Warnings" }), (0, jsx_runtime_1.jsx)("ul", { className: "list-disc pl-5 space-y-1", children: validationResult.warnings.map((warning, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "text-yellow-600", children: [(0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [warning.rule, ":"] }), " ", warning.message] }, `warning-${index}`))) })] }))] }) }))] }));
};
exports.ModelStandardsExample = ModelStandardsExample;
//# sourceMappingURL=ModelStandardsExample.js.map