Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Terminal Screenshot</title> | |
| <style> | |
| :root { | |
| --bg-gradient: linear-gradient(135deg, #66a6ff 0%, #89f7fe 100%); | |
| --term-bg: #0d1117; | |
| --term-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); | |
| --text-color: #c9d1d9; | |
| --header-bg: #0d1117; | |
| --title-color: #8b949e; | |
| --font-family: 'Menlo', 'Monaco', 'Courier New', monospace; | |
| /* Syntax Colors */ | |
| --kw-color: #ff7b72; | |
| /* from, import */ | |
| --mod-color: #79c0ff; | |
| /* module */ | |
| --func-color: #d2a8ff; | |
| /* function */ | |
| --str-color: #a5d6ff; | |
| /* string */ | |
| --comment-color: #8b949e; | |
| /* comment */ | |
| --arg-color: #79c0ff; | |
| /* arguments */ | |
| } | |
| /* Neon Theme */ | |
| body.theme-neon { | |
| --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| --term-bg: #1a1a2e; | |
| --term-shadow: 0 0 20px rgba(86, 211, 100, 0.2), 0 0 60px rgba(86, 211, 100, 0.1); | |
| --text-color: #e0e0e0; | |
| --header-bg: #16213e; | |
| --title-color: #56d364; | |
| --kw-color: #ff00ff; | |
| --mod-color: #00ffff; | |
| --func-color: #00ff00; | |
| --str-color: #ffff00; | |
| --comment-color: #6c757d; | |
| } | |
| /* Minimal Theme */ | |
| body.theme-minimal { | |
| --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| --term-bg: #ffffff; | |
| --term-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| --text-color: #24292e; | |
| --header-bg: #f6f8fa; | |
| --title-color: #586069; | |
| --kw-color: #d73a49; | |
| --mod-color: #005cc5; | |
| --func-color: #6f42c1; | |
| --str-color: #032f62; | |
| --comment-color: #6a737d; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| gap: 30px; | |
| min-height: 100vh; | |
| background: var(--bg-gradient); | |
| font-family: var(--font-family); | |
| transition: background 0.3s ease; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .controls-panel { | |
| display: flex; | |
| gap: 10px; | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 10px; | |
| border-radius: 8px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .theme-btn { | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| background: rgba(255, 255, 255, 0.8); | |
| color: #333; | |
| transition: all 0.2s; | |
| } | |
| .theme-btn:hover { | |
| transform: translateY(-1px); | |
| background: #fff; | |
| } | |
| .download-btn { | |
| padding: 12px 24px; | |
| background-color: #ffffff; | |
| color: #333; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.1s, box-shadow 0.1s; | |
| } | |
| .download-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); | |
| } | |
| .terminal-window { | |
| background-color: var(--term-bg); | |
| width: 800px; | |
| border-radius: 10px; | |
| box-shadow: var(--term-shadow); | |
| overflow: hidden; | |
| padding-bottom: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .terminal-header { | |
| background-color: var(--header-bg); | |
| padding: 15px; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| transition: background-color 0.3s ease; | |
| } | |
| .window-controls { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .control { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .close { | |
| background-color: #ff5f56; | |
| } | |
| .minimize { | |
| background-color: #ffbd2e; | |
| } | |
| .maximize { | |
| background-color: #27c93f; | |
| } | |
| .title { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| color: var(--title-color); | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .terminal-content { | |
| padding: 20px 30px; | |
| color: var(--text-color); | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| .code-line { | |
| display: block; | |
| margin-bottom: 15px; | |
| } | |
| .code-block { | |
| margin-bottom: 15px; | |
| } | |
| .code-row { | |
| display: block; | |
| line-height: 1.6; | |
| } | |
| .indent { | |
| padding-left: 40px; | |
| } | |
| .keyword { | |
| color: var(--kw-color); | |
| } | |
| .module { | |
| color: var(--mod-color); | |
| font-weight: bold; | |
| } | |
| .function { | |
| color: var(--func-color); | |
| } | |
| .string { | |
| color: var(--str-color); | |
| } | |
| .comment { | |
| color: var(--comment-color); | |
| font-style: italic; | |
| } | |
| .argument { | |
| color: var(--arg-color); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="controls-panel" data-html2canvas-ignore="true"> | |
| <button class="theme-btn" onclick="setTheme('')">Default</button> | |
| <button class="theme-btn" onclick="setTheme('theme-neon')">Neon</button> | |
| <button class="theme-btn" onclick="setTheme('theme-minimal')">Minimal</button> | |
| </div> | |
| <div class="container"> | |
| <div class="terminal-window" id="terminal"> | |
| <div class="terminal-header"> | |
| <div class="window-controls"> | |
| <div class="control close"></div> | |
| <div class="control minimize"></div> | |
| <div class="control maximize"></div> | |
| </div> | |
| <div class="title" contenteditable="true">Community Research Highlight</div> | |
| </div> | |
| <div class="terminal-content" contenteditable="true"> | |
| <div class="code-line"> | |
| <span class="keyword">from</span> <span class="module">ai4privacy</span> <span | |
| class="keyword">import</span> <span class="function">community_research</span> | |
| </div> | |
| <div class="code-line"> | |
| <span class="comment"># "Rescriber" explores on-device anonymization with small LLMs.</span> | |
| </div> | |
| <div class="code-block"> | |
| <div class="code-row"> | |
| <span class="module">community_research</span>.<span class="function">highlight</span>( | |
| </div> | |
| <div class="code-row indent"> | |
| <span class="argument">paper</span>=<span class="string">"Rescriber: On-device | |
| anonymization"</span>, | |
| </div> | |
| <div class="code-row indent"> | |
| <span class="argument">validation</span>=<span class="string">"Ai4Privacy Open Dataset"</span>, | |
| </div> | |
| <div class="code-row indent"> | |
| <span class="argument">impact</span>=<span class="string">"Proving feasibility of on-device | |
| AI"</span> | |
| </div> | |
| <div class="code-row"> | |
| ) | |
| </div> | |
| </div> | |
| <div class="code-line"> | |
| <span class="comment"># Shoutout to Jijie Zhou, Eryue Xu, Yaoyao Wu, and Tianshi Li!</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="download-btn" onclick="downloadTerminal()" data-html2canvas-ignore="true">Download PNG</button> | |
| </div> | |
| <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> | |
| <script> | |
| function setTheme(themeName) { | |
| document.body.className = themeName; | |
| } | |
| function downloadTerminal() { | |
| const elementToCapture = document.body; | |
| html2canvas(elementToCapture, { | |
| backgroundColor: null, | |
| scale: 4, | |
| ignoreElements: (element) => { | |
| return element.classList.contains('download-btn') || | |
| element.classList.contains('controls-panel'); | |
| }, | |
| windowWidth: 1200, // Ensure consistent width | |
| windowHeight: 800 | |
| }).then(canvas => { | |
| const link = document.createElement('a'); | |
| link.download = 'terminal-screenshot.png'; | |
| link.href = canvas.toDataURL('image/png'); | |
| link.click(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |