Hugging Face's logo

Spaces:
abidlabs
/
closed2open
Running

App Files Community
closed2open / recipes /test_notebook.html
abidlabs's picture
abidlabs HF Staff
changes
a909440
raw
history blame contribute delete
19.9 kB
 <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Test Notebook - ClosedToOpen</title>
<link rel="stylesheet" href="../style.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-content">
<h1 class="nav-title">ClosedToOpen</h1>
<p class="nav-subtitle">how to stop relying on proprietary APIs for AI and start living freely</p>
</div>
</nav>
<main class="main-content">
<div class="breadcrumb">
<a href="../index.html">← Back to Migration Guides</a>
</div>
<section class="recipe-header">
<h1 class="recipe-title">Test Notebook</h1>
<p class="recipe-description">Migrate from proprietary APIs to open-source alternatives</p>
<div class="recipe-meta">
<span class="difficulty">Difficulty: Medium</span>
<span class="time">Time: 45 minutes</span>
<span class="category">Category: Migration</span>
</div>
</section>
<section class="recipe-content">
<div class="notebook-content">
<style>
/* Pygments syntax highlighting - Light theme */
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #F00 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666 } /* Operator */
.highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #9C6500 } /* Comment.Preproc */
.highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.highlight .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #E40000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #008400 } /* Generic.Inserted */
.highlight .go { color: #717171 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #04D } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #687822 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #00F; font-weight: bold } /* Name.Class */
.highlight .no { color: #800 } /* Name.Constant */
.highlight .nd { color: #A2F } /* Name.Decorator */
.highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #00F } /* Name.Function */
.highlight .nl { color: #767600 } /* Name.Label */
.highlight .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #666 } /* Literal.Number.Bin */
.highlight .mf { color: #666 } /* Literal.Number.Float */
.highlight .mh { color: #666 } /* Literal.Number.Hex */
.highlight .mi { color: #666 } /* Literal.Number.Integer */
.highlight .mo { color: #666 } /* Literal.Number.Oct */
.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #A45A77 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #00F } /* Name.Function.Magic */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .vm { color: #19177C } /* Name.Variable.Magic */
.highlight .il { color: #666 } /* Literal.Number.Integer.Long */
/* Pygments syntax highlighting - Dark theme */
@media (prefers-color-scheme: dark) {
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #49483e }
.highlight { background: #272822; color: #F8F8F2 }
.highlight .c { color: #959077 } /* Comment */
.highlight .err { color: #ED007E; background-color: #1E0010 } /* Error */
.highlight .esc { color: #F8F8F2 } /* Escape */
.highlight .g { color: #F8F8F2 } /* Generic */
.highlight .k { color: #66D9EF } /* Keyword */
.highlight .l { color: #AE81FF } /* Literal */
.highlight .n { color: #F8F8F2 } /* Name */
.highlight .o { color: #FF4689 } /* Operator */
.highlight .x { color: #F8F8F2 } /* Other */
.highlight .p { color: #F8F8F2 } /* Punctuation */
.highlight .ch { color: #959077 } /* Comment.Hashbang */
.highlight .cm { color: #959077 } /* Comment.Multiline */
.highlight .cp { color: #959077 } /* Comment.Preproc */
.highlight .cpf { color: #959077 } /* Comment.PreprocFile */
.highlight .c1 { color: #959077 } /* Comment.Single */
.highlight .cs { color: #959077 } /* Comment.Special */
.highlight .gd { color: #FF4689 } /* Generic.Deleted */
.highlight .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
.highlight .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #F8F8F2 } /* Generic.Error */
.highlight .gh { color: #F8F8F2 } /* Generic.Heading */
.highlight .gi { color: #A6E22E } /* Generic.Inserted */
.highlight .go { color: #66D9EF } /* Generic.Output */
.highlight .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
.highlight .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #959077 } /* Generic.Subheading */
.highlight .gt { color: #F8F8F2 } /* Generic.Traceback */
.highlight .kc { color: #66D9EF } /* Keyword.Constant */
.highlight .kd { color: #66D9EF } /* Keyword.Declaration */
.highlight .kn { color: #FF4689 } /* Keyword.Namespace */
.highlight .kp { color: #66D9EF } /* Keyword.Pseudo */
.highlight .kr { color: #66D9EF } /* Keyword.Reserved */
.highlight .kt { color: #66D9EF } /* Keyword.Type */
.highlight .ld { color: #E6DB74 } /* Literal.Date */
.highlight .m { color: #AE81FF } /* Literal.Number */
.highlight .s { color: #E6DB74 } /* Literal.String */
.highlight .na { color: #A6E22E } /* Name.Attribute */
.highlight .nb { color: #F8F8F2 } /* Name.Builtin */
.highlight .nc { color: #A6E22E } /* Name.Class */
.highlight .no { color: #66D9EF } /* Name.Constant */
.highlight .nd { color: #A6E22E } /* Name.Decorator */
.highlight .ni { color: #F8F8F2 } /* Name.Entity */
.highlight .ne { color: #A6E22E } /* Name.Exception */
.highlight .nf { color: #A6E22E } /* Name.Function */
.highlight .nl { color: #F8F8F2 } /* Name.Label */
.highlight .nn { color: #F8F8F2 } /* Name.Namespace */
.highlight .nx { color: #A6E22E } /* Name.Other */
.highlight .py { color: #F8F8F2 } /* Name.Property */
.highlight .nt { color: #FF4689 } /* Name.Tag */
.highlight .nv { color: #F8F8F2 } /* Name.Variable */
.highlight .ow { color: #FF4689 } /* Operator.Word */
.highlight .pm { color: #F8F8F2 } /* Punctuation.Marker */
.highlight .w { color: #F8F8F2 } /* Text.Whitespace */
.highlight .mb { color: #AE81FF } /* Literal.Number.Bin */
.highlight .mf { color: #AE81FF } /* Literal.Number.Float */
.highlight .mh { color: #AE81FF } /* Literal.Number.Hex */
.highlight .mi { color: #AE81FF } /* Literal.Number.Integer */
.highlight .mo { color: #AE81FF } /* Literal.Number.Oct */
.highlight .sa { color: #E6DB74 } /* Literal.String.Affix */
.highlight .sb { color: #E6DB74 } /* Literal.String.Backtick */
.highlight .sc { color: #E6DB74 } /* Literal.String.Char */
.highlight .dl { color: #E6DB74 } /* Literal.String.Delimiter */
.highlight .sd { color: #E6DB74 } /* Literal.String.Doc */
.highlight .s2 { color: #E6DB74 } /* Literal.String.Double */
.highlight .se { color: #AE81FF } /* Literal.String.Escape */
.highlight .sh { color: #E6DB74 } /* Literal.String.Heredoc */
.highlight .si { color: #E6DB74 } /* Literal.String.Interpol */
.highlight .sx { color: #E6DB74 } /* Literal.String.Other */
.highlight .sr { color: #E6DB74 } /* Literal.String.Regex */
.highlight .s1 { color: #E6DB74 } /* Literal.String.Single */
.highlight .ss { color: #E6DB74 } /* Literal.String.Symbol */
.highlight .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #A6E22E } /* Name.Function.Magic */
.highlight .vc { color: #F8F8F2 } /* Name.Variable.Class */
.highlight .vg { color: #F8F8F2 } /* Name.Variable.Global */
.highlight .vi { color: #F8F8F2 } /* Name.Variable.Instance */
.highlight .vm { color: #F8F8F2 } /* Name.Variable.Magic */
.highlight .il { color: #AE81FF } /* Literal.Number.Integer.Long */
}
/* Override Pygments background in dark mode to match cell background */
@media (prefers-color-scheme: dark) {
.highlight {
background: #0f0f11 !important;
}
}
/* CSS Custom Properties for theming */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e9ecef;
--code-bg: #e9ecef;
--markdown-bg: #f8f9fa;
--markdown-border: #007acc;
--cell-bg: #f8f9fa;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--border-color: #404040;
--code-bg: #0f0f11;
--markdown-bg: #0f0f11;
--markdown-border: #4a9eff;
--cell-bg: #0f0f11;
}
}
/* nbgradio CSS */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
.nbgradio-content {
max-width: 1200px;
margin: 0 auto;
padding: 10px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
}
.nbgradio-fragment {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
}
.cell {
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
}
.cell:first-child {
margin-top: 20px;
}
.cell-markdown {
padding: 12px;
background: var(--markdown-bg);
border-left: 4px solid var(--markdown-border);
transition: background-color 0.3s ease;
}
.cell-markdown h1,
.cell-markdown h2,
.cell-markdown h3,
.cell-markdown h4,
.cell-markdown h5,
.cell-markdown h6 {
margin-top: 0;
color: var(--text-color);
}
.cell-markdown p {
margin-bottom: 16px;
color: var(--text-color);
}
.cell-markdown code {
background: var(--code-bg);
padding: 2px 6px;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9em;
color: var(--text-color);
}
.cell-markdown pre {
background: var(--markdown-bg);
padding: 8px;
border-radius: 8px;
overflow-x: auto;
border: 1px solid var(--border-color);
}
.cell-markdown pre code {
background: none;
padding: 0;
}
.notebook-content pre {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 1.5rem;
overflow-x: auto;
margin-bottom: 1.5rem;
}
.cell-code {
background: var(--cell-bg);
border: 1px solid var(--border-color);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.cell-code pre {
margin: 0;
padding: 8px 8px 0px 8px;
overflow-x: auto;
}
.cell-code code {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 14px;
line-height: 1.5;
color: var(--text-color);
}
.cell-gradio {
margin-bottom: 10px;
}
.gradio-app {
width: 100%;
}
.gradio-loading-container {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
margin-bottom: 10px;
background: var(--cell-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
gap: 12px;
}
.gradio-spinner {
width: 20px;
height: 20px;
border: 3px solid #2c2c2c;
border-top: 3px solid #ff7c00;
border-radius: 50%;
animation: gradio-spin 1s linear infinite;
}
.gradio-loading-text {
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
}
@keyframes gradio-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (prefers-color-scheme: dark) {
.gradio-spinner {
border: 3px solid #404040;
border-top: 3px solid #ff7c00;
}
}
/* Responsive design */
@media (max-width: 768px) {
.nbgradio-content {
padding: 5px;
}
.cell-markdown,
.cell-code {
padding: 8px;
}
}
</style>
<script
type="module"
src="https://gradio.s3-us-west-2.amazonaws.com/5.49.1/gradio.js"
></script>
<div class="nbgradio-fragment">
<div class="cell cell-markdown"><h1><code>nbgradio</code> Test Notebook</h1>
<p>This notebook demonstrates the <code>nbgradio</code> library with a simple Gradio app.</p>
</div>
<div class="cell cell-gradio" id="gradio-cell-test_notebook">
<div class="gradio-loading-container">
<div class="gradio-spinner"></div>
<span class="gradio-loading-text">Loading...</span>
</div>
<gradio-app space="abidlabs/test_notebook" class="gradio-app" style="display: none;"></gradio-app>
<script>
(function() {
const gradioApp = document.querySelector('#gradio-cell-test_notebook gradio-app');
const loadingContainer = document.querySelector('#gradio-cell-test_notebook .gradio-loading-container');
let isLoaded = false;
let checkCount = 0;
const maxChecks = 40; // 20 seconds max
function handleLoadComplete() {
if (!isLoaded) {
isLoaded = true;
console.log('Gradio app loaded for test_notebook');
loadingContainer.style.display = 'none';
gradioApp.style.display = 'block';
}
}
// Try multiple event types that Gradio might emit
const events = ['render', 'loaded', 'ready', 'mount'];
events.forEach(event => {
gradioApp.addEventListener(event, handleLoadComplete);
});
// Fallback: Check if the Gradio app has content loaded
const checkLoaded = () => {
checkCount++;
// Multiple detection methods
const hasShadowContent = gradioApp.shadowRoot && gradioApp.shadowRoot.children.length > 0;
const hasVisibleContent = gradioApp.offsetHeight > 100; // App has some height
const hasIframe = gradioApp.querySelector('iframe');
const hasGradioContent = gradioApp.innerHTML.includes('gradio') ||
(gradioApp.shadowRoot &&
gradioApp.shadowRoot.innerHTML.includes('gradio'));
if (hasShadowContent || hasVisibleContent || hasIframe || hasGradioContent) {
handleLoadComplete();
} else if (checkCount < maxChecks) {
setTimeout(checkLoaded, 500);
} else {
// Give up after maxChecks attempts and show the app anyway
handleLoadComplete();
}
};
// Start checking after a short delay
setTimeout(checkLoaded, 1000);
})();
</script>
</div>
<div class="cell cell-markdown"><h2>Another Section</h2>
<p>The code block above used the <code>#nbgradio</code> syntax so that it is launched as a Gradio app. If you don't add that comment block, the <code>nbgradio</code> will treat it as &quot;regular&quot; code that should just be syntax highlighted:</p>
</div>
<div class="cell cell-code"><pre><code><div class="highlight"><pre><span></span><code><span class="k">def</span><span class="w"> </span><span class="nf">calculate_fibonacci</span><span class="p">(</span><span class="n">n</span><span class="p">):</span>
<span class="w"> </span><span class="sd">&quot;&quot;&quot;Calculate the nth Fibonacci number.&quot;&quot;&quot;</span>
<span class="k">if</span> <span class="n">n</span> <span class="o">&lt;=</span> <span class="mi">1</span><span class="p">:</span>
<span class="k">return</span> <span class="n">n</span>
<span class="k">return</span> <span class="n">calculate_fibonacci</span><span class="p">(</span><span class="n">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="n">calculate_fibonacci</span><span class="p">(</span><span class="n">n</span> <span class="o">-</span> <span class="mi">2</span><span class="p">)</span>
<span class="c1"># Test the function</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;F(</span><span class="si">{</span><span class="n">i</span><span class="si">}</span><span class="s2">) = </span><span class="si">{</span><span class="n">calculate_fibonacci</span><span class="p">(</span><span class="n">i</span><span class="p">)</span><span class="si">}</span><span class="s2">&quot;</span><span class="p">)</span>
</code></pre></div>
</code></pre></div>
</div>
</div>
</section>
</main>
</body>
</html>