Skip to content

Commit

Permalink
Update aliroed intropage (#639)
Browse files Browse the repository at this point in the history 
* working on sidemenu

* replace Aliro with AliroEd.
Update footer text "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."

* fixed typo.
updated the broken download link.
  • Loading branch information
@HyunjunA
HyunjunA authored Nov 28, 2023
1 parent 10c976e commit a97a17b
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 118 deletions.
43 changes: 31 additions & 12 deletions lab/webapp/src/components/Builder/components/AlgorithmOptions/index.jsx
View file
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
View file
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
81 changes: 9 additions & 72 deletions lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx
View file
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
View file
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
View file
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
View file
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
View file
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
View file
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

0 comments on commit a97a17b

Please sign in to comment.