Download examples/cases.json from sabulin/InfoVis: direct link, hf CLI and curl.
- Browser
- Download file 22.3 kB
-
https://huggingface.co/spaces/sabulin/InfoVis/resolve/main/examples/cases.json
- Command line
-
hf download hf://spaces/sabulin/InfoVis/examples/cases.json
-
curl -L -o cases.json https://huggingface.co/spaces/sabulin/InfoVis/resolve/main/examples/cases.json
22.3 kB
| [ | |
| { | |
| "task": "Text-to-slide", | |
| "label": "Text-to-slide 路 Foundations of Rhetoric", | |
| "instruction": "This presentation slide has a solid muted olive-green background (#7A8B5C) and a two-column layout. In the upper left, the title \"FOUNDATIONS OF RHETORIC\" is set over two lines in large, thin, off-white serif capitals. In the upper right, the subtitle \"(The Art of Persuasion)\" appears in a light sans-serif font, with a thin off-white horizontal rule beneath it spanning the right column.\n\nThe lower left quadrant features a large coral-red circle (#F0705A) partially cut off by the left and bottom edges of the slide. In front of it stands a classical white marble bust of a Greek man with curly hair and draped robes, shown from the chest up and looking toward the right.\n\nOn the right, below the rule, a heading reads \"The Three Core Pillars:\" followed by four bullet points in off-white sans-serif text, with the leading term of each bullet in semi-bold:\n- \"Ethos: Establishes the credibility and moral character of the speaker\"\n- \"Pathos: Appeals to the audience's emotions and values\"\n- \"Logos: Employs logical reasoning and factual evidence to prove a point\"\n- \"Conclusion: True persuasion thrives when all three pillars unite\"\n\nThe overall look is elegant and classical, with generous spacing and high contrast between the off-white text and the green background.", | |
| "images": [], | |
| "output": "examples/out_foundations_of_rhetoric.jpg" | |
| }, | |
| { | |
| "task": "Text-to-slide", | |
| "label": "Text-to-slide 路 Guide to Productive Learning", | |
| "instruction": "This presentation slide uses a soft pastel gradient background that shifts from light blue on the left to peach on the right, decorated with small floating bubbles and stars, with leafy plants and tiny flowers along the bottom corners, all rendered in a cute 3D clay style. At the top center, the title \"GUIDE TO PRODUCTIVE LEARNING\" is written in large, bold, rounded coral-red letters with a white outline.\n\nBelow the title are three rounded cream-colored cards side by side, each topped by a coral header band with white text:\n1. \"1. EFFECTIVE STUDY METHODS\", with the bullets \"Active Recall Practice\", \"Spaced Repetition\", \"Mind Mapping Techniques\", and \"Teaching Others Concepts\"; at the bottom of the card, a smiling yellow pencil, colorful sticky notes, and a coral notebook.\n2. \"2. TIME MANAGEMENT TIPS\", with the bullets \"Set Clear Daily Goals\", \"Use Pomodoro Technique\", \"Eliminate Distractions\", and \"Take Regular Breaks\"; at the bottom, a smiling red alarm clock next to a smiling spiral notepad.\n3. \"3. OPTIMAL LEARNING ENVIRONMENT\", with the bullets \"Choose Quiet Study Spaces\", \"Maintain Good Posture\", \"Ensure Proper Lighting\", and \"Keep Materials Organized\"; at the bottom, a sleeping white cat with \"Zzz\" next to a steaming cup of coffee on a small wooden table.\n\nThe bullet text is dark brown in a rounded sans-serif font. The overall style is cheerful, soft, and friendly, like a 3D cartoon infographic.", | |
| "images": [], | |
| "output": "examples/out_guide_to_productive_learning.jpg" | |
| }, | |
| { | |
| "task": "Template-conditioned", | |
| "label": "Template-conditioned 路 Overview: remote vs. in-office teams", | |
| "instruction": "Create a single presentation slide with the same layout, fonts, and muted beige and green color palette as the reference slide. Keep all design elements, lines, and spacing identical, but replace every piece of text with new content of similar length for a different topic, while preserving the overall visual style.\n\nAt the top left, in large serif title text, write: \n'OVERVIEW'\n\nCentered near the top in smaller serif text, write: \n'Compare two approaches to modern team collaboration and workflow.'\n\nBelow the horizontal line, keep the green header bar across the slide. Inside the left side of this bar, in white serif text, write: \n'REMOTE TEAMS'\n\nInside the right side of this bar, in white serif text, write: \n'IN鈥慜FFICE TEAMS'\n\nIn the first row beneath the header bar, keep the left-aligned label column. In this first row鈥檚 label cell, write in uppercase serif text: \n'COMMUNICATION'\n\nIn the first row鈥檚 middle cell, centered, write: \n'Video calls, chat apps, asynchronous updates'\n\nIn the first row鈥檚 right cell, centered, write: \n'Face鈥憈o鈥慺ace meetings and quick hallway talks'\n\nIn the second row鈥檚 label cell, write: \n'WORKFLOW'\n\nIn the second row鈥檚 middle cell, centered, write: \n'Flexible hours, task boards, cloud鈥慴ased tools'\n\nIn the second row鈥檚 right cell, centered, write: \n'Set schedules, in鈥憄erson check鈥慽ns, shared office files'\n\nIn the third row鈥檚 label cell, write: \n'ENVIRONMENT'\n\nIn the third row鈥檚 middle cell, centered, write: \n'Home offices, co鈥憌orking spaces, digital whiteboards'\n\nIn the third row鈥檚 right cell, centered, write: \n'Open-plan desks, conference rooms, physical whiteboards'\n\nIn the fourth row鈥檚 label cell, write: \n'TEAM CULTURE'\n\nIn the fourth row鈥檚 middle cell, centered, write: \n'Intentional rituals, virtual socials, clear documentation'\n\nIn the fourth row鈥檚 right cell, centered, write: \n'Spontaneous chats, office events, shared daily routines'\n\nEnsure all text is crisp and readable, aligned and spaced just like in the original slide, with no additional images or icons added.\n\nReference: the attached image is a previous slide from the same deck. Treat it as the default style reference -- by default, inherit its background, palette, typography, containers, decorations and mood.\n\nOverride: wherever the content description above calls for a different look (different colors, different composition, different mood, etc.), follow the content rather than the reference.\n\nAspect ratio: 16:9.", | |
| "images": [ | |
| "examples/template_overview_reference.jpg" | |
| ], | |
| "output": "examples/out_overview_remote_vs_office.jpg" | |
| }, | |
| { | |
| "task": "Template-conditioned", | |
| "label": "Template-conditioned 路 Creative Assets", | |
| "instruction": "Construct a slide featuring a soft, luminous gradient background that flows diagonally from a pale, warm yellow in the upper left corner to a rich coral and magenta hue in the upper right, then into a deeper orange toward the bottom, with the colors blending smoothly like a sunset. On the far right side of the slide, occupying roughly the lower two鈥憈hirds of the height, place an abstract 3D spiral sculpture made of thick, tubular rings in glossy golden鈥憃range, twisting inward toward an invisible center; the sculpture casts subtle, soft shadows onto the background, enhancing its depth. In the far left foreground, let a blurred, out鈥憃f鈥慺ocus golden shape intrude slightly from the edge, echoing the same material as the spiral and adding a sense of depth of field.\n\nAcross the top center of the slide, write the main heading in large, white, modern sans鈥憇erif letters with smooth curves and generous tracking; the text reads: \"Creative Assets\". This title should be left鈥慳ligned but positioned so that it begins slightly left of center, and it should cast a faint, diffuse shadow to stand out against the warm gradient.\n\nIn the upper right area, near the top navigation region, place three simple navigation labels in small, white, semi鈥慴old sans鈥憇erif font, evenly spaced horizontally and aligned to the right edge. The leftmost label reads \"Overview\", the middle label reads \"Team\", and the rightmost label reads \"Roadmap\". Above these, centered at the very top of the slide, include a rounded rectangular button with a thin white outline and transparent fill; inside this pill鈥憇haped button, in small white uppercase letters, write \"Workshop\". The button should glow subtly, indicating it is the currently selected section.\n\nBelow the main heading, arranged in a single horizontal row across the middle of the slide, add three rounded鈥憆ectangle cards with transparent centers and softly glowing borders. Each card should be aligned vertically, with equal spacing between them, and they should occupy the central area from left to right without touching the extreme edges. The borders of the cards are thin, white, and slightly translucent, with a faint inner shadow that gives them a frosted鈥慻lass look, allowing the gradient background to show through.\n\nOn the left card, which represents the first deliverable, fill the interior with a slightly darker, semi鈥憈ransparent orange overlay to differentiate it, and at the top of this card write in bold white sans鈥憇erif text: \"Introductory slide deck\". The words should be stacked over two lines, aligned to the left inside the card. Beneath this heading, leave a line of spacing, then in smaller, regular鈥憌eight white text, also left鈥慳ligned, add the description: \"Summarize key goals, audience, and timeline in a concise visual story.\" This descriptive sentence should wrap naturally across two or three lines within the card, mimicking the rhythm and length of the original subtitle.\n\nOn the middle card, use the same semi鈥憈ransparent orange overlay and styling. At its top, in bold white sans鈥憇erif text, write: \"Interactive concept mockup\". Ensure the phrase is broken across two lines so that \"Interactive concept\" appears on the first line and \"mockup\" on the second, both left鈥慳ligned. Underneath, again in smaller white body text, left鈥慳ligned and occupying roughly three lines, write: \"Demonstrate how users move through the experience, from first click to final action.\"\n\nOn the right card, overlapping slightly in front of the large spiral sculpture but remaining clearly legible, repeat the same visual treatment. At the top of this third card, in bold white sans鈥憇erif text, write: \"Launch announcement video\". The words should form two lines, left鈥慳ligned within the card. Below that heading, in smaller white text, provide a short explanation that echoes the word count and structure of the others: \"Highlight the product story, core benefits, and brand personality in two minutes.\" Let this description wrap into two or three lines, maintaining visual balance with the other cards.\n\nThroughout the slide, ensure all text remains crisp and smooth, with no visible pixelation, and that the warm gradient, glowing card borders, and sculptural 3D elements combine into a cohesive, modern, and slightly futuristic design, closely matching the layout and proportions just described while clearly featuring the new phrases \"Creative Assets\", \"Workshop\", \"Overview\", \"Team\", \"Roadmap\", \"Introductory slide deck\", \"Interactive concept mockup\", and \"Launch announcement video\" in their specified positions and styles.\n\nRULES:\n(R1) The attached image is the reference slide from the same deck; treat it as the DEFAULT style reference.\n(R2) Unless the content above says otherwise, inherit from the reference: background, color palette, typography, containers, decorations, theme and mood.\n(R3) Whenever the content description above specifies a different style for a given aspect (colors, typography, layout, mood, etc.), the content OVERRIDES the reference on that aspect.\n(R4) Aspect ratio: 16:9.", | |
| "images": [ | |
| "examples/template_creative_assets_reference.jpg" | |
| ], | |
| "output": "examples/out_creative_assets.jpg" | |
| }, | |
| { | |
| "task": "Multi-image grounded", | |
| "label": "Multi-image grounded 路 Roman Colosseum", | |
| "instruction": "The slide features a warm-toned travel poster titled **\"ROMAN COLOSSEUM\"** in bold, classic serif lettering at the top, set against a muted parchment background with a thin decorative border. The layout is divided into three main columns: History, Architecture, and Experience, with a narrow bottom bar for brief visitor tips. In the center of the slide, a large sub image of the ancient amphitheater dominates the design, showing its curved stone arches under a deep blue sky.\n\nIn the left column, under **History**, short lines read: \n- \"Opened: 80 AD\" \n- \"Commissioned by: Emperor Vespasian\" \n- \"Used for: Games & public events\"\n\nIn the middle column, labeled **Architecture**, the text notes: \n- \"Elliptical amphitheater\" \n- \"Concrete & travertine stone\" \n- \"Tiers of arches & columns\"\n\nIn the right column, titled **Experience**, concise phrases appear: \n- \"Walk the arena floor\" \n- \"See underground passages\" \n- \"Imagine the roaring crowds\"\n\nThe bottom bar, labeled **VISITOR NOTES**, contains three tiny icons with minimal captions: a clock icon with \"Arrive early,\" a ticket icon with \"Book in advance,\" and a camera icon with \"Respect preservation rules.\" The overall emphasis of the slide stays on the sub image, allowing the visual of the Colosseum to be the primary focus.", | |
| "images": [ | |
| "examples/multi_colosseum.jpg" | |
| ], | |
| "output": "examples/out_roman_colosseum.jpg" | |
| }, | |
| { | |
| "task": "Multi-image grounded", | |
| "label": "Multi-image grounded 路 Island Horizons Getaway", | |
| "instruction": "### ROLE\nYou are a senior presentation art director and precision layout renderer.\n\n### TASK\nRender the given Structured Content JSON as one polished 16:9 presentation slide. Treat the JSON as the complete design brief: `global_style` controls the visual system, `visual_hierarchy` guides composition, and `blocks` provide the exact slide elements.\n\n### HARD RULES\n1. Use only text found in block `content`. Do not invent titles, labels, captions, summaries, or decorative copy.\n2. Follow `global_style` strictly for background, palette, typography, lighting, spacing language, and overall material feel.\n3. If `special_instructions` appears, it is the creative override. Apply it faithfully while still preserving the provided textual content.\n4. Avoid generic slides. Choose a composition that matches the content: editorial grid, hero visual, split layout, card system, timeline, layered diagram, or spacious minimalist treatment.\n5. Embed all source images into the slide.\n\n### QUALITY BAR\nThe result should look like a professionally designed keynote slide: crisp text, intentional hierarchy, balanced whitespace, coherent color usage, and no clutter.\n\n### SLIDE JSON:\n```json\n{\n \"global_style\": {\n \"theme_name\": \"Tropical Travel & Adventure\",\n \"background\": {\n \"color\": \"#FFFFFF\",\n \"gradient\": null,\n \"texture\": \"none\",\n \"pattern\": null\n },\n \"font_palette\": {\n \"primary\": \"Arial Black\",\n \"secondary\": \"Arial\"\n },\n \"color_palette\": {\n \"primary\": \"#8FD3E6\",\n \"secondary\": \"#2C3E50\",\n \"text\": \"#1A1A1A\",\n \"accent\": \"#E8F4F8\"\n },\n \"special_instructions\": \"The slide carries a refined, contemporary tropical journey aesthetic. Maintain a split layout with a large, vibrant anime-style illustration on the left and organized informational cards on the right. Use tropical blues, teals, and hints of warm sunset tones to create an uplifting, aspirational mood. Typography remains bold, clear, and sans-serif for strong readability.\"\n },\n \"visual_hierarchy\": {\n \"mood_tone\": \"Playful, Inviting, Professional\",\n \"composition_style\": \"Two-column (Image Left, Content Right)\"\n },\n \"styled_slides\": [\n {\n \"slide_id\": 571,\n \"blocks\": [\n {\n \"id\": \"title-571\",\n \"type\": \"text\",\n \"role\": \"title\",\n \"content\": \"ISLAND HORIZONS GETAWAY\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"font_family\": \"Arial Black\",\n \"importance\": \"dominant\",\n \"position\": \"top-center, above main heading\",\n \"text_style\": {\n \"font_weight\": \"bold\",\n \"text_effect\": [],\n \"outline_color\": null,\n \"shadow_type\": \"none\"\n },\n \"container\": \"bubble\",\n \"special_instructions\": \"Text is white, uppercase, centered inside a rounded rectangular pill shape with a light blue background (#8FD3E6).\"\n }\n },\n {\n \"id\": \"title-571-main\",\n \"type\": \"text\",\n \"role\": \"title\",\n \"content\": \"SUNLIT SHORES, ENDLESS JOURNEYS\",\n \"style\": {\n \"color\": \"#1A1A1A\",\n \"font_family\": \"Arial Black\",\n \"importance\": \"dominant\",\n \"position\": \"top-center, below subtitle\",\n \"text_style\": {\n \"font_weight\": \"bold\",\n \"text_effect\": [],\n \"outline_color\": null,\n \"shadow_type\": \"none\"\n },\n \"container\": \"none\",\n \"special_instructions\": \"Large, bold, uppercase black text centered on the white background.\"\n }\n },\n {\n \"id\": \"image-571\",\n \"type\": \"image\",\n \"role\": \"visual_elements\",\n \"content\": {\n \"image_paths\": [\n {\n \"path\": \"imgs/img_in_image_box_40_39_520_766.jpg\",\n \"relative_path\": \"imgs/img_in_image_box_40_39_520_766.jpg\"\n }\n ],\n \"source\": \"Main slide illustration\",\n \"caption\": null\n },\n \"style\": {\n \"position\": \"left side, vertically spanning from top to bottom\",\n \"image_style\": \"rounded corners\",\n \"container\": \"none\",\n \"special_instructions\": \"A vertical anime-style illustration showing a couple on a wooden deck overlooking a tropical ocean with overwater bungalows, coral reefs, and palm trees. The image has rounded corners.\"\n }\n },\n {\n \"id\": \"body-571-1\",\n \"type\": \"text\",\n \"role\": \"body\",\n \"content\": \"COASTAL HIDEAWAYS\\nSoft Sand Lagoon Beaches\\nPanoramic Ocean Villas\\nDrift-free Island Transfers\",\n \"style\": {\n \"font_family\": \"Arial\",\n \"color\": \"#1A1A1A\",\n \"importance\": \"supporting\",\n \"position\": \"right column, first card\",\n \"container\": \"rounded panel\",\n \"container_opacity\": \"1.0\",\n \"special_instructions\": \"Text is inside a white rounded rectangle card with a light blue border. Title is bold uppercase. List items are normal weight. Card has a circular illustration of a bungalow on an island at the top.\"\n }\n },\n {\n \"id\": \"body-571-2\",\n \"type\": \"text\",\n \"role\": \"body\",\n \"content\": \"SERENITY & RENEWAL\\nOcean Breeze Spa Rituals\\nGolden Hour Beachflow Yoga\\nCalm-Current Seaside Reflection\",\n \"style\": {\n \"font_family\": \"Arial\",\n \"color\": \"#1A1A1A\",\n \"importance\": \"supporting\",\n \"position\": \"right column, second card\",\n \"container\": \"rounded panel\",\n \"container_opacity\": \"1.0\",\n \"special_instructions\": \"Text is inside a white rounded rectangle card with a light blue border. Title is bold uppercase. List items are normal weight. Card has a circular illustration of a person doing yoga under palm trees at the top.\"\n }\n },\n {\n \"id\": \"body-571-3\",\n \"type\": \"text\",\n \"role\": \"body\",\n \"content\": \"OCEAN DISCOVERY QUESTS\\nShimmering Reef Snorkel Trails\\nBlue Depth Dive Expeditions\\nClose-Up Encounters with Sea Life\",\n \"style\": {\n \"font_family\": \"Arial\",\n \"color\": \"#1A1A1A\",\n \"importance\": \"supporting\",\n \"position\": \"right column, third card\",\n \"container\": \"rounded panel\",\n \"container_opacity\": \"1.0\",\n \"special_instructions\": \"Text is inside a white rounded rectangle card with a light blue border. Title is bold uppercase. List items are normal weight. Card has a circular illustration of underwater coral and fish at the top.\"\n }\n },\n {\n \"id\": \"body-571-4\",\n \"type\": \"text\",\n \"role\": \"body\",\n \"content\": \"LOCAL RHYTHMS & FLAVORS\\nHarbor Villages & Island Paths\\nSunset Dhoni Voyages & Cast-Line Fun\\nSea-to-Table Island Tastings\",\n \"style\": {\n \"font_family\": \"Arial\",\n \"color\": \"#1A1A1A\",\n \"importance\": \"supporting\",\n \"position\": \"right column, fourth card\",\n \"container\": \"rounded panel\",\n \"container_opacity\": \"1.0\",\n \"special_instructions\": \"Text is inside a white rounded rectangle card with a light blue border. Title is bold uppercase. List items are normal weight. Card has a circular illustration of a boat at sunset at the top.\"\n }\n }\n ]\n }\n ]\n}\n```", | |
| "images": [ | |
| "examples/multi_island.jpg" | |
| ], | |
| "output": "examples/out_island_getaway.jpg" | |
| }, | |
| { | |
| "task": "Slide editing", | |
| "label": "Slide editing 路 Theme switch: Chinese Guochao style", | |
| "instruction": "Transform this slide into a Chinese Guochao (鍥芥疆) style: apply a bold Chinese red (#CC0000) background overlaid with subtle teal-green (#2E8B57) wave patterns, restyle the \"Spring\" title and body text in a modern blocky Chinese display font, and redraw the butterflies and flowers as trendy, flat-vector illustrations with thick black outlines and auspicious cloud accents.", | |
| "images": [ | |
| "examples/edit_theme_switch_source.png" | |
| ], | |
| "output": "examples/out_theme_switch.jpg" | |
| }, | |
| { | |
| "task": "Slide editing", | |
| "label": "Slide editing 路 Replace the icon with a rocket photo", | |
| "instruction": "Replace the graphic on the left side of the slide, which currently shows a white exploding battery icon inside a yellow grunge frame, with a new image of a white rocket launching upward with a trail of smoke, keeping it within the same yellow grunge frame.", | |
| "images": [ | |
| "examples/edit_image_change_source.png" | |
| ], | |
| "output": "examples/out_image_change.jpg" | |
| } | |
| ] |