Skip to content

Commit

Permalink
Add spinner, improve alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@krassowski
krassowski committed Aug 16, 2024
1 parent 09caded commit 52bda71
Show file tree
Hide file tree
Showing 2 changed files with 185 additions and 77 deletions.
40 changes: 30 additions & 10 deletions content/demo-dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<style>
.post {
border: 1px solid #ccc;
border: 1px solid #999;
border-radius: 4px;
display: grid;
grid-auto-flow: column;
Expand Down Expand Up @@ -38,23 +38,34 @@
padding: 8px;
}
code[data-run] {
margin-left: 94px;
white-space: pre;
font-size: 13px;
display: flex;
align-items: flex-end;
display: block;
padding: 10px;
position: absolute;
right: 8px;
bottom: 8px;
top: 215px;
left: 90px;
background: rgb(245, 245, 245);
border: 1px solid #ccc;
}
code[data-run], .code-wrapper, iframe {
.code-wrapper, iframe {
height: 400px;
}
code[data-run] {
border: 1px solid #ccc;
}
iframe {
width: 100%
}
.code-wrapper {
position: relative;
border: 1px solid #ccc;
}
.spinner-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
scale: 3;
}
</style>
</head>
Expand Down Expand Up @@ -165,7 +176,15 @@ <h2>AI Assurance Portal</h2>
const wrapper = document.createElement('div');
wrapper.classList.add('code-wrapper');
codeEl.replaceWith(wrapper);
wrapper.appendChild(codeEl)
wrapper.appendChild(codeEl);

const spinerWrapper = document.createElement('div');
const spiner = document.createElement('div');
spinerWrapper.appendChild(spiner);
spinerWrapper.className = "spinner-wrapper";
spiner.className = 'spinner-border text-primary';
wrapper.appendChild(spinerWrapper);

wrapper.appendChild(iframe);
iframe.style.display = 'none';
iframe.onload = async () => {
Expand All @@ -175,13 +194,15 @@ <h2>AI Assurance Portal</h2>
jupyter.restored.then(() => {
codeEl.style.display = 'none';
iframe.style.display = 'block';
spinerWrapper.style.display = 'none';
});
jupyter.shell.currentChanged.connect((shell, change) => {
jupyter.commands.execute('console:replace-selection', {text: cleanCode});
});
} else {
codeEl.style.display = 'none';
iframe.style.display = 'block';
spinerWrapper.style.display = 'none';
}
}
}
Expand All @@ -191,4 +212,3 @@ <h2>AI Assurance Portal</h2>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

222 changes: 155 additions & 67 deletions content/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,117 +9,205 @@

<style>
.post {
border: 1px solid #ccc;
margin: 12px;
border: 1px solid #999;
border-radius: 4px;
display: grid;
grid-auto-flow: column;
grid-template-columns: 60px 1fr;
padding: 8px
}
.post, .title-header {
margin: 12px;
}
.user {
align-items: center;
display: flex;
flex-direction: column;
}
.user-logo {
padding: 10px;
border-radius: 50px;
width: 50px;
height: 50px;
background: #ccc;
align-items: center;
display: flex;
place-content: center;
border: 1px solid #666;
}
.content {
padding: 4px
padding: 8px;
}
code[data-run] {
white-space: pre-wrap;
white-space: pre;
font-size: 13px;
display: block;
padding: 10px;
position: absolute;
right: 8px;
bottom: 8px;
top: 215px;
left: 90px;
background: rgb(245, 245, 245);
border: 1px solid #ccc;
}
.code-wrapper, iframe {
height: 400px;
}
iframe {
width: 100%
}
#loader {
display: none;
.code-wrapper {
position: relative;
border: 1px solid #ccc;
}
.spinner-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
scale: 3;
}
</style>
</head>
<body>

<div class="post container">
<div class="user"><i class="bi bi-person-fill"></i></div>
<div class="content">
<p>I'm testing out this simple logistic regression model but it does not work, how can I fix that?</p>
<code data-run>
from sklearn import datasets
from sklearn.linear_model import LogisticRegression
<div class="container">
<div class="row title-header">
<h2>AI Assurance Portal</h2>
</div>
<div class="post row">
<div class="user">
<div class="user-logo" style="background: lightblue">
<i class="bi bi-person-fill"></i>
</div>
M. K.
</div>
<div class="content">
<p>I'm testing out this simple logistic regression model but it does not work, how can I fix that?</p>
<code data-run>
from sklearn import datasets
from sklearn.linear_model import LogisticRegression

X, y = datasets.load_digits(return_X_y=True)
y = (y > 4).astype(int)
X, y = datasets.load_digits(return_X_y=True)
y = (y > 4).astype(int)

model = LogisticRegression(penalty="l1", tol=0.01)
model.fit(X, y)
</code>
model = LogisticRegression(penalty="l1", tol=0.01)
model.fit(X, y)
</code>
</div>
</div>
</div>

<div class="post container">
<div class="user"><i class="bi bi-person-fill"></i></div>
<div class="content">
<p>You need to change solver, by passing an argument like this <code>solver="saga"</code>, see below:</p>
<code data-run>
from sklearn import datasets
from sklearn.linear_model import LogisticRegression
<div class="post row">
<div class="user">
<div class="user-logo" style="background: lightgoldenrodyellow">
<i class="bi bi-person-fill"></i>
</div>
D. P.
</div>
<div class="content">
<p>You need to change solver, by passing an argument like this <code>solver="saga"</code>, see below:</p>
<code data-run>
from sklearn import datasets
from sklearn.linear_model import LogisticRegression

X, y = datasets.load_digits(return_X_y=True)
y = (y > 4).astype(int)
X, y = datasets.load_digits(return_X_y=True)
y = (y > 4).astype(int)

model = LogisticRegression(penalty="l1", tol=0.01, solver="saga")
model.fit(X, y)
</code>
model = LogisticRegression(penalty="l1", tol=0.01, solver="saga")
model.fit(X, y)
</code>
</div>
</div>
</div>

<div id="loader"></div>

<script>
const styles = `
.jp-CodeConsole-banner {
display: none;
}
.jp-PoweredBy {
display: none !important;
}
`;
const loader = document.getElementById('loader');

for (const codeEl of document.querySelectorAll('code[data-run]')) {
const styleSheet = document.createElement("style");
styleSheet.textContent = styles;
const iframe = document.createElement('iframe');
const code = codeEl.textContent;
// find indent
let indent = 0;
for (const line of code.split('\n')) {
if (line.length === 0) {
continue
async function getJupyterApp(iframe, pause=50, maxAttempts=100) {
let attempt = 1;
while (attempt < maxAttempts) {
if (iframe.contentWindow.jupyterapp) {
return iframe.contentWindow.jupyterapp;
}
while (line.length > indent && line.substring(indent, indent + 1) === ' ') {
indent += 1;
}
break;
attempt += 1;
await new Promise(resolve => setTimeout(resolve, pause));
}
let cleanCode = '';
let blocks = [];
for (const line of code.split('\n')) {
if (cleanCode === '' && line.length === 0) {
continue
throw Error(`Could not acquite 'jupyterapp' object in ${maxAttempts * pause} ms`);
}
async function load() {
for (const codeEl of document.querySelectorAll('code[data-run]')) {
const styleSheet = document.createElement("style");
styleSheet.textContent = styles;
const iframe = document.createElement('iframe');
const code = codeEl.textContent;
// find indent
let indent = 0;
for (const line of code.split('\n')) {
if (line.length === 0) {
continue
}
while (line.length > indent && line.substring(indent, indent + 1) === ' ') {
indent += 1;
}
break;
}
cleanCode += line.substring(indent) + '\n';
}
codeEl.textContent = cleanCode;
iframe.src = `https://quansight.github.io/jupyterlite-demo/repl/index.html?kernel=python&toolbar=1&code=${encodeURIComponent(cleanCode)}`;
iframe.style.width = '100%';
iframe.style.height = '300px';
iframe.onload = () => {
if (iframe.contentDocument) {
iframe.contentDocument.head.appendChild(styleSheet);
const cleanLines = [];
for (const line of code.split('\n')) {
if (cleanLines.length === 0 && line.length === 0) {
// remove first empty line
continue
}
cleanLines.push(line.substring(indent));
}
// remove last empty line
if (cleanLines[cleanLines.length - 1] === '') {
cleanLines.pop();
}
const cleanCode = cleanLines.join('\n')
codeEl.textContent = cleanCode;
const baseURL = location.href.split('/').slice(0, -2).join('/');
iframe.src = baseURL + `/repl/index.html?kernel=python&toolbar=1`;
iframe.style.width = '100%';
const wrapper = document.createElement('div');
wrapper.classList.add('code-wrapper');
codeEl.replaceWith(wrapper);
wrapper.appendChild(codeEl);

const spinerWrapper = document.createElement('div');
const spiner = document.createElement('div');
spinerWrapper.appendChild(spiner);
spinerWrapper.className = "spinner-wrapper";
spiner.className = 'spinner-border text-primary';
wrapper.appendChild(spinerWrapper);

wrapper.appendChild(iframe);
iframe.style.display = 'none';
iframe.onload = async () => {
if (iframe.contentDocument) {
iframe.contentDocument.head.appendChild(styleSheet);
const jupyter = await getJupyterApp(iframe);
jupyter.restored.then(() => {
codeEl.style.display = 'none';
iframe.style.display = 'block';
spinerWrapper.style.display = 'none';
});
jupyter.shell.currentChanged.connect((shell, change) => {
jupyter.commands.execute('console:replace-selection', {text: cleanCode});
});
} else {
codeEl.style.display = 'none';
iframe.style.display = 'block';
spinerWrapper.style.display = 'none';
}
}
codeEl.replaceWith(iframe);
}
loader.appendChild(iframe);
}
load()
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
Expand Down

0 comments on commit 52bda71

Please sign in to comment.