Spaces:
Runtime error
Runtime error
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1000"> | |
| <defs> | |
| <!-- 现代化的渐变效果 --> | |
| <linearGradient id="blockGradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#5B8FF9;stop-opacity:0.15"/> | |
| <stop offset="100%" style="stop-color:#5B8FF9;stop-opacity:0.25"/> | |
| </linearGradient> | |
| <linearGradient id="inputGradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#3CC780;stop-opacity:0.15"/> | |
| <stop offset="100%" style="stop-color:#3CC780;stop-opacity:0.25"/> | |
| </linearGradient> | |
| <!-- 优化的箭头标记 --> | |
| <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" | |
| markerWidth="6" markerHeight="6" orient="auto"> | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#5B8FF9"/> | |
| </marker> | |
| <marker id="controlArrow" viewBox="0 0 10 10" refX="9" refY="5" | |
| markerWidth="6" markerHeight="6" orient="auto"> | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#9C27B0"/> | |
| </marker> | |
| <!-- 阴影效果 --> | |
| <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> | |
| <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> | |
| <feOffset dx="2" dy="2" result="offsetblur"/> | |
| <feComponentTransfer> | |
| <feFuncA type="linear" slope="0.2"/> | |
| </feComponentTransfer> | |
| <feMerge> | |
| <feMergeNode/> | |
| <feMergeNode in="SourceGraphic"/> | |
| </feMerge> | |
| </filter> | |
| </defs> | |
| <!-- Reference Image Input - 调整位置和大小 --> | |
| <g transform="translate(250,30)" filter="url(#shadow)"> | |
| <rect x="0" y="0" width="300" height="50" rx="8" fill="url(#inputGradient)" stroke="#3CC780" stroke-width="2"/> | |
| <text x="150" y="30" text-anchor="middle" font-family="Arial" font-size="16" fill="#1A1A1A">Input Image</text> | |
| </g> | |
| <!-- Qwen2VL Transformer - 优化布局 --> | |
| <g transform="translate(200,120)" filter="url(#shadow)"> | |
| <rect x="0" y="0" width="400" height="250" rx="8" fill="url(#blockGradient)" stroke="#5B8FF9" stroke-width="2"/> | |
| <text x="200" y="35" text-anchor="middle" font-family="Arial" font-size="20" font-weight="bold" fill="#1A1A1A">Qwen2VL-7B Transformer</text> | |
| <!-- 自注意力层 - 更紧凑的布局 --> | |
| <g transform="translate(50,60)"> | |
| <rect x="0" y="0" width="300" height="35" rx="4" fill="white" stroke="#5B8FF9"/> | |
| <text x="150" y="23" text-anchor="middle" font-size="14">Self-Attention Layer</text> | |
| </g> | |
| <g transform="translate(50,105)"> | |
| <rect x="0" y="0" width="300" height="35" rx="4" fill="white" stroke="#5B8FF9"/> | |
| <text x="150" y="23" text-anchor="middle" font-size="14">Self-Attention Layer</text> | |
| </g> | |
| <g transform="translate(50,150)"> | |
| <rect x="0" y="0" width="300" height="35" rx="4" fill="white" stroke="#5B8FF9"/> | |
| <text x="150" y="23" text-anchor="middle" font-size="14">Self-Attention Layer</text> | |
| </g> | |
| <g transform="translate(50,195)"> | |
| <rect x="0" y="0" width="300" height="35" rx="4" fill="white" stroke="#5B8FF9"/> | |
| <text x="150" y="23" text-anchor="middle" font-size="14">Self-Attention Layer</text> | |
| </g> | |
| </g> | |
| <!-- GridDot Panel - 紫色主题 --> | |
| <g transform="translate(620,200)"> | |
| <rect x="0" y="0" width="140" height="140" rx="8" fill="#F3E5F5" stroke="#9C27B0" stroke-width="2" stroke-dasharray="4,4"/> | |
| <!-- Optional badge --> | |
| <g transform="translate(110,-10)"> | |
| <rect x="0" y="0" width="60" height="20" rx="10" fill="#9C27B0" filter="url(#shadow)"/> | |
| <text x="30" y="14" text-anchor="middle" font-family="Arial" font-size="12" fill="white">Optional</text> | |
| </g> | |
| <text x="70" y="30" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold" fill="#1A1A1A">GridDot Panel</text> | |
| <!-- 网格可视化 - 紫色主题 --> | |
| <g transform="translate(20,45)"> | |
| <rect width="100" height="80" fill="none" stroke="#9C27B0"/> | |
| <g fill="#9C27B0"> | |
| <circle cx="25" cy="20" r="3.5"/> | |
| <circle cx="50" cy="20" r="3.5"/> | |
| <circle cx="75" cy="20" r="3.5"/> | |
| <circle cx="25" cy="40" r="3.5"/> | |
| <circle cx="50" cy="40" r="3.5"/> | |
| <circle cx="75" cy="40" r="3.5"/> | |
| <circle cx="25" cy="60" r="3.5"/> | |
| <circle cx="50" cy="60" r="3.5"/> | |
| <circle cx="75" cy="60" r="3.5"/> | |
| </g> | |
| </g> | |
| </g> | |
| <!-- Qwen2VL Image Embeddings --> | |
| <g transform="translate(250,410)" filter="url(#shadow)"> | |
| <rect x="0" y="0" width="300" height="50" rx="8" fill="url(#blockGradient)" stroke="#5B8FF9" stroke-width="2"/> | |
| <text x="150" y="30" text-anchor="middle" font-family="Arial" font-size="16" fill="#1A1A1A">Qwen2VL Image Embeddings</text> | |
| </g> | |
| <!-- Connector Network --> | |
| <g transform="translate(250,500)" filter="url(#shadow)"> | |
| <rect x="0" y="0" width="300" height="50" rx="8" fill="url(#blockGradient)" stroke="#5B8FF9" stroke-width="2"/> | |
| <text x="150" y="30" text-anchor="middle" font-family="Arial" font-size="16" fill="#1A1A1A">Connector</text> | |
| </g> | |
| <!-- T5XXL Text Embeddings (Optional) --> | |
| <g transform="translate(50,590)"> | |
| <!-- Background with dashed border --> | |
| <rect x="0" y="0" width="200" height="50" rx="8" fill="url(#inputGradient)" stroke="#3CC780" stroke-width="2" stroke-dasharray="4,4"/> | |
| <!-- Optional badge --> | |
| <g transform="translate(170,-10)"> | |
| <rect x="0" y="0" width="60" height="20" rx="10" fill="#FFB74D" filter="url(#shadow)"/> | |
| <text x="30" y="14" text-anchor="middle" font-family="Arial" font-size="12" fill="white">Optional</text> | |
| </g> | |
| <!-- Main text --> | |
| <text x="100" y="30" text-anchor="middle" font-family="Arial" font-size="16" fill="#1A1A1A">T5 Text Embeddings</text> | |
| </g> | |
| <!-- FLUX Transformer --> | |
| <g transform="translate(150,680)" filter="url(#shadow)"> | |
| <rect x="0" y="0" width="500" height="220" rx="8" fill="url(#blockGradient)" stroke="#5B8FF9" stroke-width="2"/> | |
| <text x="250" y="35" text-anchor="middle" font-family="Arial" font-size="20" font-weight="bold" fill="#1A1A1A">FLUX Transformer</text> | |
| <!-- Block Layers --> | |
| <g transform="translate(50,60)"> | |
| <rect x="0" y="0" width="400" height="50" rx="4" fill="white" stroke="#5B8FF9"/> | |
| <text x="200" y="30" text-anchor="middle" font-size="16">Double Block Layer</text> | |
| </g> | |
| <g transform="translate(50,130)"> | |
| <rect x="0" y="0" width="400" height="50" rx="4" fill="white" stroke="#5B8FF9"/> | |
| <text x="200" y="30" text-anchor="middle" font-size="16">Single Block Layer</text> | |
| </g> | |
| </g> | |
| <!-- Output --> | |
| <g transform="translate(250,940)" filter="url(#shadow)"> | |
| <rect x="0" y="0" width="300" height="50" rx="8" fill="url(#inputGradient)" stroke="#3CC780" stroke-width="2"/> | |
| <text x="150" y="30" text-anchor="middle" font-family="Arial" font-size="16" fill="#1A1A1A">Generated Image</text> | |
| </g> | |
| <!-- Connections - 优化连线 --> | |
| <g stroke-width="2" fill="none"> | |
| <!-- 主流程 --> | |
| <path d="M400,80 L400,120" stroke="#5B8FF9" marker-end="url(#arrow)"/> | |
| <path d="M400,370 L400,410" stroke="#5B8FF9" marker-end="url(#arrow)"/> | |
| <path d="M400,460 L400,500" stroke="#5B8FF9" marker-end="url(#arrow)"/> | |
| <path d="M400,550 L400,680" stroke="#5B8FF9" marker-end="url(#arrow)"/> | |
| <path d="M250,615 L400,680" stroke="#5B8FF9" stroke-dasharray="4,4" marker-end="url(#arrow)"/> | |
| <path d="M400,900 L400,940" stroke="#5B8FF9" marker-end="url(#arrow)"/> | |
| <!-- GridDot Panel控制 --> | |
| <path d="M620,270 L550,400" stroke="#9C27B0" stroke-dasharray="5,5" marker-end="url(#controlArrow)"/> | |
| </g> | |
| <!-- Double Block Layer重复指示器 --> | |
| <text x="560" y="740" font-family="Arial" font-size="14" font-style="italic" fill="#666">×N</text> | |
| <!-- Single Block Layer重复指示器 --> | |
| <text x="560" y="810" font-family="Arial" font-size="14" font-style="italic" fill="#666">×M</text> | |
| </svg> | |