Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update aliroed intropage #639

Merged
merged 4 commits into from
Nov 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,29 @@ function AlgorithmOptions({

function openTrueOrFalse_algorithm_popup() {
if (localStorage.getItem("algorithm-popup") == "true") {
// if (document.getElementById("aiTooglePopup")!==null){
// document.getElementById("aiTooglePopup").style.cssText = "display: block !important";
// }

return false;
} else {
return true;
}
}

// Function to determine the OS type
function getOsType() {
const userAgent = navigator.userAgent.toLowerCase();

if (userAgent.includes("win")) return "Windows";
if (userAgent.includes("mac")) return "macOS";
if (userAgent.includes("linux")) {
// Check user agent for Raspberry Pi OS identification
if (userAgent.includes("raspberry")) return "Raspberry Pi OS";
return "Linux";
}
if (userAgent.includes("iphone") || platform.includes("ipad")) return "iOS";
if (userAgent.includes("android")) return "Android";

return "Unknown OS";
}

return (
<Grid.Column width={16}>
<Segment inverted attached="top" className="panel-header">
Expand Down Expand Up @@ -99,14 +112,20 @@ function AlgorithmOptions({
content={
<div className="content">
<p>{algorithm.description}</p>
{algorithm.url && (
<a href={algorithm.url} target="_blank">
<strong>
Read more here{" "}
<Icon name="angle double right" />
</strong>
</a>
)}
{algorithm.url &&
getOsType() !== "Raspberry Pi OS" && (
// getOsType() === "rasp" && (
<a
href={algorithm.url}
target="_blank"
rel="noopener noreferrer"
>
<strong>
Read more here{" "}
<Icon name="angle double right" />
</strong>
</a>
)}
</div>
}
trigger={
Expand Down
3 changes: 3 additions & 0 deletions lab/webapp/src/components/ChatGPT/SideMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { ThemeContext } from "./context/ThemeContext";

import { AllContext } from "./context/AllContext";

import { Icon } from "semantic-ui-react";

export default function SideMenu() {
const {
currentModel,
Expand Down Expand Up @@ -237,6 +239,7 @@ export default function SideMenu() {
.slice(3)
.forEach((node) => {
node.childNodes[1].style.display = "none";
// <Icon name="trash alternate outline" />
node.childNodes[1].innerHTML = "🗑️";
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,15 @@ import * as actions from "data/datasets/dataset/actions";
import DatasetActions from "./components/DatasetActions";
import BestResult from "./components/BestResult";
import ExperimentStatus from "./components/ExperimentStatus";

import {
Grid,
Segment,
Header,
Button,
Popup,
Message,
Icon,
} from "semantic-ui-react";
import { formatDataset, formatDatasetOuter } from "../../../../utils/formatter";

Expand All @@ -55,13 +57,6 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
icon_type = "line graph";
}

// const [showGrid, setShowGrid] = useState(false);

// const handleGridClick = () => {
// console.log("handleGridClick");
// setShowGrid(false);
// };

function clickDatasetCardDelButton(e) {
let parent = e.target.closest(".dataset-card");
// console.log(parent);
Expand Down Expand Up @@ -278,11 +273,12 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
<span
className="float-right"
onClick={clickDatasetCardDelButton}
onMouseEnter={mouseEnterCardDelectButton}
onMouseLeave={mouseLeaveCardDelectButton}
// onMouseEnter={mouseEnterCardDelectButton}
// onMouseLeave={mouseLeaveCardDelectButton}
style={{ cursor: "pointer" }}
>
🗑
{/* use trash icon from sementic ui */}
<Icon name="trash alternate outline" />
</span>

<span className="float-right">
Expand Down Expand Up @@ -435,11 +431,11 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
<span
className="float-right"
onClick={clickDatasetCardDelButton}
onMouseEnter={mouseEnterCardDelectButton}
onMouseLeave={mouseLeaveCardDelectButton}
// onMouseEnter={mouseEnterCardDelectButton}
// onMouseLeave={mouseLeaveCardDelectButton}
style={{ cursor: "pointer" }}
>
🗑
<Icon name="trash alternate outline" />
</span>
<span className="float-right">
<DatasetActions
Expand Down Expand Up @@ -469,64 +465,11 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
</Grid.Column>
);
}

// return (
// <Grid.Column className="dataset-card">

// <Segment inverted attached="top" className="panel-header">
// <Popup
// position="right center"
// header={formatDataset(dataset.name)}
// content={`Rows: ${dataset.metafeatures.n_rows}, Cols: ${dataset.metafeatures.n_columns}, Classes: ${dataset.metafeatures.n_classes} Prediction type: ${dataset.files[0].prediction_type}`}
// trigger={
// <Header
// as="a"
// inverted
// size="large"
// icon={icon_type}
// content={formatDataset(dataset.name)}
// href={datasetLink}
// className="title"
// />
// }
// />
// <span className="float-right">
// <DatasetActions
// dataset={dataset}
// recommender={recommender}
// toggleAI={toggleAI}
// />
// </span>
// </Segment>

// <BestResult
// result={dataset.best_result}
// hasMetadata={dataset.has_metadata}
// />
// <ExperimentStatus
// filter={dataset._id}
// experiments={dataset.experiments}
// notifications={dataset.notifications}
// />
// <Button
// as="a"
// color="blue"
// attached="bottom"
// content="Build New Experiment"
// href={builderLink}
// />

// </Grid.Column>
// );
};

export { DatasetCard };
export default connect(null, actions)(DatasetCard);

// get aiTooglePopup id
// if aiTooglePopup is not null, then hide it
// wait until document.getElementById("aiTooglePopup") loaded

setTimeout(function () {
if (document.getElementById("aiTooglePopup") != null) {
console.log("aiTooglePopup is not null");
Expand All @@ -538,11 +481,5 @@ setTimeout(function () {
// length of aiTooglePopups
var len = aiTooglePopups.length;
console.log(len);

// if (aiTooglePopups != null) {
// for (var i = 1; i < aiTooglePopups.length; i++) {
// aiTooglePopups[i].style.cssText += ';display:none !important;';
// }
// }
}
}, 100);
26 changes: 4 additions & 22 deletions raspberrypi/intropage/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ <h1 class="fw-light text-white">
<a
href="https://github.com/EpistasisLab/Aliro"
style="color: #000000; font-weight: bold"
>the github repository.</a
>the GitHub repository.</a
>
</p>
<!-- <p>
Expand All @@ -251,15 +251,15 @@ <h1 class="fw-light text-white">
</div>

<div class="mySlides row py-lg-5">
<h1 class="fw-light text-white">Are you ready to run Aliro?</h1>
<h1 class="fw-light text-white">Are you ready to run AliroEd?</h1>

<p
class="lead text-white"
style="padding-left: 50px; padding-right: 50px"
>
When Raspberry Pi is ready to run AliroEd, the below button shows
"Alio is ready to run". Please click the button to run Aliro On
Raspberry Pi 4
"AliroEd is ready to run". Please click the button to run AliroEd
on Raspberry Pi 4
</p>
<p>
<a id="loadingbutton" href="" class="btn btn-primary my-2"
Expand All @@ -268,15 +268,6 @@ <h1 class="fw-light text-white">Are you ready to run Aliro?</h1>
</p>
</div>

<!-- <div class="mySlides row py-lg-5">
<h1 class="fw-light text-white">AliroEd_3</h1>
<p class="lead text-white" style="padding-left: 50px;padding-right: 50px;">AliroEd is a new way to learn and teach.</p>
<p>
<a id='loadingbutton' href="#" class="btn btn-primary my-2">Loading AliroEd ...</a>
</p>
</div> -->

<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
Expand Down Expand Up @@ -389,15 +380,6 @@ <h1 class="fw-light text-white">AliroEd_3</h1>
</div>
</main>

<!-- <footer id="bottomfooter" class="text-muted py-5">
<div class="container" >
<p class="float-end mb-1">
<a id="backtotop" href="#">Back to top</a>
</p>
<p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
<p class="mb-0">New to Bootstrap? <a href="./">Visit the homepage</a> or read our <a href="../getting-started/introduction/">getting started guide</a>.</p>
</div>
</footer> -->
<footer id="bottomfooter" class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
Expand Down
13 changes: 9 additions & 4 deletions raspberrypi/intropage/infAndDownloadpage.html
Original file line number Diff line number Diff line change
Expand Up @@ -221,9 +221,12 @@ <h4 class="text-white">Contact</h4>
<h2 class="text-start text-black"> Overview </h2>



<p class="text-start text-black">Welcome to the AliroEd. AliroEd is for users who are not familiar with machine learning. Users can experience machine learning tasks on Raspberry Pi 4 with AliroEd. If internet is available, Users can download the raspberry pi image from the <a href="http://52.35.223.86/infAndDownloadpage.html">AliroEd website</a>.
Users can easily install and run AliroEd on Raspberry Pi 4 using this image. AliroEd and the Raspberry Pi image provided in this website, are developed by the AI Research Center at the Computational Biomedicine Department Cedars-Sinai Medical Center, Los Angeles, CA, USA. <br>
<!-- http://52.35.223.86/infAndDownloadpage.html -->
<!-- <a href="http://52.35.223.86/infAndDownloadpage.html">AliroEd website</a> -->
<p class="text-start text-black">Welcome to the AliroEd. AliroEd is for users who are not familiar with machine learning. Users can experience machine learning tasks on Raspberry Pi 4 with AliroEd. If internet is available, Users can download the raspberry pi image from the <a href="http://52.35.223.86/education/#download">AliroEd website</a>.
Users can easily install and run AliroEd on Raspberry Pi 4 using this image. AliroEd and the Raspberry Pi image provided in this website, are developed by the Center for AI Research and Education (CAIRE) in the
Department of Computational Biomedicine at Cedars-Sinai Medical Center
in Los Angeles, California, USA. <br>
<br>
If you have any questions, please contact us at <a href="mailto:AISupport@csmc.edu ">AISupport@csmc.edu</a>. </p>

Expand Down Expand Up @@ -501,7 +504,9 @@ <h2 class="text-start text-white"> News </h2>
</p>
<!-- <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
<p class="mb-0">New to Bootstrap? <a href="./">Visit the homepage</a> or read our <a href="../getting-started/introduction/">getting started guide</a>.</p> -->
<p id="footertext" class="mb-1 footerCon">Developed by AI Research Center at the Computational Biomedicine Department, Cedars-Sinai Medical Center, Los Angeles, CA, USA.</p>
<p id="footertext" class="mb-1 footerCon">Developed by the Center for AI Research and Education (CAIRE) in the
Department of Computational Biomedicine at Cedars-Sinai Medical Center
in Los Angeles, California, USA.</p>
</div>
</footer>

Expand Down
4 changes: 3 additions & 1 deletion raspberrypi/intropage/int_ml_01.html
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,9 @@ <h2 class="text-start text-black"> Drawing boundaries </h2>
<a id="backtotop" href="#">Back to top</a>
</p>

<p id="footertext" class="mb-1 footerCon">Developed by AI Research Center at the Computational Biomedicine Department, Cedars-Sinai Medical Center, Los Angeles, CA, USA.</p>
<p id="footertext" class="mb-1 footerCon">Developed by the Center for AI Research and Education (CAIRE) in the
Department of Computational Biomedicine at Cedars-Sinai Medical Center
in Los Angeles, California, USA.</p>
<!-- <p class="mb-0">New to Bootstrap? <a href="./">Visit the homepage</a> or read our <a href="../getting-started/introduction/">getting started guide</a>.</p> -->
</div>
</footer>
Expand Down
10 changes: 4 additions & 6 deletions raspberrypi/intropage/int_ml_02.html
Original file line number Diff line number Diff line change
Expand Up @@ -209,10 +209,7 @@ <h2 class="text-start text-black">
>
has the highest average of sepal-length.
</p>
<p class="text-start text-black">
Please click the Y axis. It will show an example to put
boundaries
</p>

<p class="text-start text-black">
Please click the Y axis. It will show an example to put
boundaries to distinguish classes of iris flowers. Then please
Expand Down Expand Up @@ -457,8 +454,9 @@ <h2 class="text-start">Drawing boundaries</h2>
</p>

<p id="footertext" class="mb-1 footerCon">
Developed by AI Research Center at the Computational Biomedicine
Department, Cedars-Sinai Medical Center, Los Angeles, CA, USA.
Developed by the Center for AI Research and Education (CAIRE) in the
Department of Computational Biomedicine at Cedars-Sinai Medical Center
in Los Angeles, California, USA.
</p>
<!-- <p class="mb-0">New to Bootstrap? <a href="./">Visit the homepage</a> or read our <a href="../getting-started/introduction/">getting started guide</a>.</p> -->
</div>
Expand Down
4 changes: 3 additions & 1 deletion raspberrypi/intropage/int_ml_03_decision_tree.html
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,9 @@ <h2 class="text-start"> Drawing boundaries </h2>
<a id="backtotop" href="#">Back to top</a>
</p>

<p id="footertext" class="mb-1 footerCon">Developed by AI Research Center at the Computational Biomedicine Department, Cedars-Sinai Medical Center, Los Angeles, CA, USA.</p>
<p id="footertext" class="mb-1 footerCon">Developed by the Center for AI Research and Education (CAIRE) in the
Department of Computational Biomedicine at Cedars-Sinai Medical Center
in Los Angeles, California, USA.</p>

</div>
</footer>
Expand Down
Loading