{ "id": "nanodsl-basic-v1", "name": "NanoDSL Basic Evaluation Suite", "description": "Core test cases to evaluate AI model's ability to generate valid NanoDSL", "defaultPromptTemplate": "default", "models": [ { "name": "deepseek-chat", "provider": "deepseek", "modelId": "deepseek-chat", "temperature": 0.0, "maxTokens": 2048 } ], "testCases": [ { "id": "simple-card", "name": "Simple Greeting Card", "description": "Generate a basic greeting card with title and message", "userPrompt": "Create a simple greeting card with a hello title and welcome message", "expectedDslFile": "expect/01-simple-card.nanodsl", "category": "BASIC", "difficulty": "EASY", "tags": ["card", "text", "layout"] }, { "id": "product-card", "name": "Product Display Card", "description": "Generate a product card with image, title, price, badge, and action button", "userPrompt": "Create a product card component that takes a Product item and displays: product image, title, 'New' badge if item is new, description (limited to 2 lines), price, and an 'Add to Cart' button", "expectedDslFile": "expect/02-product-card.nanodsl", "category": "COMPOSITE", "difficulty": "MEDIUM", "tags": ["card", "image", "conditional", "button"] }, { "id": "counter-card", "name": "Interactive Counter", "description": "Generate a counter with state management and price calculation", "userPrompt": "Create a counter card component with count and price state. Show the total (count * price), and include minus/plus buttons to modify count, with an input field for direct count entry", "expectedDslFile": "expect/03-counter-card.nanodsl", "category": "STATE", "difficulty": "MEDIUM", "tags": ["state", "binding", "interaction", "calculation"] }, { "id": "login-form", "name": "Login Form", "description": "Generate a login form with email, password inputs and navigation", "userPrompt": "Create a login form component with email and password inputs, a Login button that calls /api/login, and a 'Sign Up' link that navigates to /signup", "expectedDslFile": "expect/04-login-form.nanodsl", "category": "INTERACTION", "difficulty": "MEDIUM", "tags": ["form", "input", "navigation", "fetch"] }, { "id": "task-list", "name": "Todo Task List", "description": "Generate a task list with add/delete functionality and list rendering", "userPrompt": "Create a task list component that takes a list of Task items. Include an input to add new tasks, and render each task with a checkbox and delete button. Use a for loop to iterate over tasks", "expectedDslFile": "expect/05-task-list.nanodsl", "category": "LIST", "difficulty": "HARD", "tags": ["list", "for-loop", "input", "checkbox"] }, { "id": "user-profile", "name": "User Profile Card", "description": "Generate a user profile card with avatar, stats, and conditional badge", "userPrompt": "Create a user profile card that displays: avatar image, name, email, verified badge (if verified), bio text, follower/following counts, and an Edit Profile button", "expectedDslFile": "expect/06-user-profile.nanodsl", "category": "COMPOSITE", "difficulty": "MEDIUM", "tags": ["profile", "image", "conditional", "stats"] }, { "id": "http-request-form", "name": "HTTP Request Contact Form", "description": "Generate a contact form with HTTP POST request submission", "userPrompt": "Create a contact form component with name, email, and message fields. Include a Send button that submits a POST request to /api/contact with the form data as JSON. Show loading state while submitting, display success message on success, and show error message on failure. Use proper HTTP headers for JSON content type.", "expectedDslFile": "expect/07-http-request-form.nanodsl", "category": "HTTP", "difficulty": "HARD", "tags": ["form", "http", "fetch", "state", "callbacks"] }, { "id": "nested-conditionals", "name": "Order Status with Nested Conditionals", "description": "Generate an order status card with multiple nested conditional renderings based on status", "userPrompt": "Create an OrderStatusCard component that takes an Order object. Display the order ID with a status badge that changes color based on status (pending=yellow, processing=blue, shipped=green, cancelled=red). If the order is urgent, show an URGENT badge with priority message. Show total, item count, and discount if applicable. If shipped, show tracking number and ETA. Show Cancel button only for pending orders, and View Details button for non-cancelled orders.", "expectedDslFile": "expect/08-nested-conditionals.nanodsl", "category": "CONDITIONAL", "difficulty": "HARD", "tags": ["conditional", "nested-if", "badge", "status"] }, { "id": "nested-loops", "name": "Category Product List with Nested Loops", "description": "Generate a product catalog with nested loops for categories and products", "userPrompt": "Create a CategoryProductList component that takes a list of Category objects. Each category has a name, product_count, and list of products. Show categories with expand/collapse functionality using state. When expanded, show products with thumbnail, name, price (with sale price if on_sale), stock status badge, and Add to Cart button. Include Load More button if category has more products.", "expectedDslFile": "expect/09-nested-loops.nanodsl", "category": "LIST", "difficulty": "HARD", "tags": ["for-loop", "nested-loop", "state", "expand-collapse"] }, { "id": "complex-state", "name": "Invoice Calculator with Complex State", "description": "Generate an invoice calculator with multiple computed state values", "userPrompt": "Create an InvoiceCalculator component with state for items list, tax_rate, discount_percent, discount_code, and computed values (subtotal, tax_amount, discount_amount, total). Allow adding/removing items, adjusting quantities. Include a discount code input that validates via API call. Show breakdown of subtotal, discount (if applied), tax, and total with reactive bindings.", "expectedDslFile": "expect/10-complex-state.nanodsl", "category": "STATE", "difficulty": "HARD", "tags": ["state", "computed", "binding", "calculation", "http"] }, { "id": "multi-action-sequence", "name": "Payment Form with Multi-Action Sequence", "description": "Generate a payment form with complex multi-step action sequences", "userPrompt": "Create a PaymentForm component with card details (number, expiry, cvv, name) and a save_card checkbox. On Pay button click, perform validation, then make POST to /api/payment/process with all data. On success: clear cart, show toast, track event, navigate to confirmation. On error: show error message. Show success state with View Order button after payment completes.", "expectedDslFile": "expect/11-multi-action-sequence.nanodsl", "category": "INTERACTION", "difficulty": "HARD", "tags": ["action-sequence", "validation", "http", "callbacks", "state-machine"] }, { "id": "dashboard-layout", "name": "Dashboard with Complex Layout", "description": "Generate a dashboard with multiple cards, stats, and tab navigation", "userPrompt": "Create a Dashboard component that takes User and Stats objects. Show welcome message, date range selector, and export button. Display 4 stat cards (Revenue, Orders, Customers, Conversion) with values and percentage change badges (green if positive, red if negative). Add tab navigation (Overview, Orders, Products, Customers). In Overview tab, show Recent Orders list and Top Products list side by side.", "expectedDslFile": "expect/12-dashboard-layout.nanodsl", "category": "COMPOSITE", "difficulty": "HARD", "tags": ["layout", "tabs", "stats", "conditional", "for-loop"] }, { "id": "form-validation", "name": "Registration Form with Validation", "description": "Generate a registration form with inline validation and async username check", "userPrompt": "Create a RegistrationForm component with fields: username (with async availability check on blur), email, password (with strength indicator showing 8+ chars), confirm_password (with match validation), phone (optional), country select, and terms checkbox. Show field-level error messages from state.errors. On submit, call /api/register and handle success (navigate to login) and error (show field errors).", "expectedDslFile": "expect/13-form-validation.nanodsl", "category": "INTERACTION", "difficulty": "HARD", "tags": ["form", "validation", "async", "http", "state"] }, { "id": "pagination-list", "name": "Article List with Pagination", "description": "Generate a paginated article list with search, filter, and sort", "userPrompt": "Create an ArticleList component with state for articles, current_page, total_pages, search_query, filter_category, and sort_by. Show search input, category filter, and sort dropdown. Display articles with thumbnail, category badge, featured badge if applicable, title, excerpt, author, date, and read time. Include full pagination controls (First, Prev, numbered pages, Next, Last) and page indicator.", "expectedDslFile": "expect/14-pagination-list.nanodsl", "category": "LIST", "difficulty": "HARD", "tags": ["pagination", "search", "filter", "sort", "for-loop"] }, { "id": "shopping-cart", "name": "Shopping Cart with Full Functionality", "description": "Generate a complete shopping cart with items, coupons, shipping, and checkout", "userPrompt": "Create a ShoppingCart component with items list, coupon functionality, and order summary. Show empty cart state with Continue Shopping button. For items: display image, name, variant, price, quantity controls (with API update), stock status, line total, and remove button. Include coupon input with apply functionality. Show shipping method select, then subtotal/shipping/tax/total breakdown. Include Proceed to Checkout button.", "expectedDslFile": "expect/15-shopping-cart.nanodsl", "category": "COMPOSITE", "difficulty": "HARD", "tags": ["cart", "state", "http", "calculation", "for-loop"] }, { "id": "multi-page-navigation", "name": "Multi-Page Navigation", "description": "Generate a multi-page app with simple navigation between pages", "userPrompt": "Create a simple multi-page app with: a HomePage component with a welcome message and a button to navigate to /about, an AboutPage component with company info and a Back button to navigate to /, and a NavBar component at the top with links to both pages", "expectedDslFile": "expect/16-multi-page-navigation.nanodsl", "category": "NAVIGATION", "difficulty": "EASY", "tags": ["navigation", "multi-page", "button"] }, { "id": "parameterized-route", "name": "Parameterized Route Navigation", "description": "Generate components that navigate with dynamic route parameters", "userPrompt": "Create a UserListItem component that displays user avatar, name, email, and a View Profile button that navigates to /user/{id} with the user's id as a param. Also create a UserProfile component that shows the user ID from state and has a Back to List button", "expectedDslFile": "expect/17-parameterized-route.nanodsl", "category": "NAVIGATION", "difficulty": "MEDIUM", "tags": ["navigation", "params", "route-params"] }, { "id": "search-with-query", "name": "Search Page with Query Navigation", "description": "Generate a search page that uses query parameters for filtering and pagination", "userPrompt": "Create a SearchPage component with search input, category filter, and results list. The Search button should navigate to /search with query parameters for search term, category, and page number. Include Previous/Next pagination buttons that update the page query param", "expectedDslFile": "expect/18-search-with-query.nanodsl", "category": "NAVIGATION", "difficulty": "MEDIUM", "tags": ["navigation", "query", "search", "pagination"] }, { "id": "conditional-navigation", "name": "Login with Conditional Navigation", "description": "Generate a login form that navigates on success with replace history", "userPrompt": "Create a LoginForm with email/password inputs. On login button click, call /api/login. On success, navigate to /dashboard with replace=true (so user can't go back to login). On error, show error message. Include Sign Up link to /signup and Forgot Password link to /forgot-password with email as query param", "expectedDslFile": "expect/19-conditional-navigation.nanodsl", "category": "NAVIGATION", "difficulty": "MEDIUM", "tags": ["navigation", "replace", "conditional", "http"] } ], "tags": ["nanodsl", "ai-eval", "ui-generation"] }