Skip to content

Commit

Permalink
Big update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Franri3008
Franri3008 committed Dec 19, 2024
1 parent cf607c4 commit 6a132c8
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 36 deletions.
3 changes: 3 additions & 0 deletions pages/Wheels/.vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
72 changes: 42 additions & 30 deletions pages/Wheels/wheel2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@
z-index: 2000;
white-space: pre-wrap;
}
/* Add a class for icons so we can handle their opacity together with texts and circles */
.circle-icon {
transition: opacity 0.3s ease;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -132,6 +136,8 @@

const allMainTexts = [];
const allSubtexts = [];
const allSmallCircles = [];
const allIcons = [];

function showTooltip(desc, evt) {
if (!desc || desc.trim() === '') return;
Expand Down Expand Up @@ -201,6 +207,7 @@
smallCircleElement.style.cursor = 'pointer';
}
circleGroup.appendChild(smallCircleElement);
allSmallCircles.push(smallCircleElement);

const iconSize = smallRadius * 1.2;
const icon = document.createElementNS(NS, 'image');
Expand All @@ -209,36 +216,24 @@
icon.setAttribute('y', y - iconSize / 2);
icon.setAttribute('width', iconSize);
icon.setAttribute('height', iconSize);
icon.setAttribute('class', 'circle-icon');

// Apply icon transform if specified
if (iconTransform) {
// Currently they are being transformed to white with brightness/invert.
// We'll do the same but if we want a custom color, we can approximate.
// For simplicity, if icon_transform is a hex, we transform the icon from black to white,
// then use a CSS filter approximation.
// If user wants the exact color, they'd need inline SVG manipulation,
// but here we show a conceptual approach.

// If user provided a hex color, we try to colorize it:
// We'll first turn it white:
let filterStr = 'brightness(0) invert(1)';
// If the color is not white (#ffffff), we can try a rough approximation with sepia/hue-rotate
let filterStr = 'brightness(0) invert(1)';
if (iconTransform.toLowerCase() !== '#ffffff') {
// This won't produce exact matches for all colors, but it's a demonstration.
// For a generic approach, you'd need a more complex calculation.
// Let's try a simple sepia and hue-rotate:
// We assume user picks a color and we try to approximate:
filterStr += ' sepia(1) saturate(10000%) hue-rotate(0deg)';
// With no hue-rotate, this gives a reddish tone.
// Perfect color mapping is complex via CSS filters.
filterStr += ' sepia(1) saturate(10000%) hue-rotate(0deg)';
}
icon.setAttribute('style', `filter: ${filterStr};`);
} else {
// No transform
icon.removeAttribute('style');
}

if (items[i].url) {
icon.style.cursor = 'pointer';
}

circleGroup.appendChild(icon);
allIcons.push(icon);

const textOffset = 80;
const textDistance = circleRadius + smallRadius + textOffset;
Expand Down Expand Up @@ -317,7 +312,7 @@
allSubtexts.push(subtextGroup);
}

circleGroup.addEventListener('mouseenter', (evt) => {
const onHover = (evt) => {
const scaleFactor = 1.35;
const dx = x - centerX;
const dy = y - centerY;
Expand All @@ -331,41 +326,58 @@
circleGroup.lineElement.setAttribute('stroke-width', hoverStrokeWidth.toString());
circleGroup.lineElement.setAttribute('stroke', circleColor);
circleGroup.lineElement.setAttribute('stroke-dasharray', '');

// Make other texts, subtexts, circles, and icons opaque = 0.4
allMainTexts.forEach((t) => {
if (t !== mainText) t.style.opacity = '0.4';
});
allSubtexts.forEach((sub) => {
if (!fullGroup.contains(sub)) sub.style.opacity = '0.4';
});
allSmallCircles.forEach((c) => {
if (c !== smallCircleElement) c.style.opacity = '0.4';
});
allIcons.forEach((ic) => {
if (ic !== icon) ic.style.opacity = '0.4';
});

centralText1.setAttribute('fill', '#ffffff');
centralText2.setAttribute('fill', '#ffffff');
if (items[i].url) showURL(items[i].url);
showTooltip(items[i].description, evt);
});
};

circleGroup.addEventListener('mouseleave', () => {
const onLeave = () => {
fullGroup.setAttribute('transform', '');
centralCircle.setAttribute('fill', '#FFFFFF');
centralCircle.setAttribute('stroke', '#000000'); // restore outline on mouse leave
centralCircle.setAttribute('stroke', '#000000'); // restore outline
centralCircle.removeAttribute('style');
circleGroup.lineElement.setAttribute('stroke-width', originalStrokeWidth.toString());
circleGroup.lineElement.setAttribute('stroke', '#000000');
circleGroup.lineElement.setAttribute('stroke-dasharray', '5,5');

// Restore opacity
allMainTexts.forEach((t) => { t.style.opacity = '1'; });
allSubtexts.forEach((sub) => { sub.style.opacity = '1'; });
allSmallCircles.forEach((c) => { c.style.opacity = '1'; });
allIcons.forEach((ic) => { ic.style.opacity = '1'; });

centralText1.setAttribute('fill', centralColor);
centralText2.setAttribute('fill', centralColor);
hideURL();
hideTooltip();
});
};

circleGroup.addEventListener('mouseenter', onHover);
circleGroup.addEventListener('mouseleave', onLeave);

if (items[i].url) {
smallCircleElement.addEventListener('click', () => {
const openLink = () => {
window.open(items[i].url, '_blank');
});
mainText.addEventListener('click', () => {
window.open(items[i].url, '_blank');
});
};
smallCircleElement.addEventListener('click', openLink);
mainText.addEventListener('click', openLink);
icon.addEventListener('click', openLink);
}
}
});
Expand Down
12 changes: 6 additions & 6 deletions pages/Wheels/wheel2.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@
"subname": "PleIAs",
"bullets": ["Permissible licensed text dataset", "Contains a diverse set of sources (books, newspapers, scientific articles)"],
"description": "The largest open and permissible licensed text dataset, comprising over 2 trillion tokens (2,003,039,184,047 tokens). Contains a diverse set of sources such as books, newspapers, scientific articles, government and legal documents, code, and more.\nEstimated number of rows: 396,953,971\nSize of auto-converted Parquet files (First 5GB): 2.96 GB\nKey feature: Data is permissively licensed, meaning it can be used, modified, and redistributed without legal ambiguity or risk of infringement.",
"icon": "https://drive.google.com/file/d/10OJ348DMNH3nd8yJBqyP44unwQPL-x9a/view?usp=drive_link",
"icon": "https://cdn-avatars.huggingface.co/v1/production/uploads/64ce091a9e9ca8123d7a42b0/vCajdXlzRs0zAU-b_KJ_G.png",
"url": "https://huggingface.co/datasets/PleIAs/common_corpus",
"color": "#C658C6",
"color": "#0221b9",
"x": 0.0,
"y": -0.05
},
Expand All @@ -70,7 +70,7 @@
"subname": "OpenAI",
"bullets": ["Covers 57 topics from physics to history", "Test set translated into 14 languages using professional human translators"],
"description": "Benchmark dataset for assessing the general knowledge and reasoning skills of AI models. It covers 57 topics from physics to history, and its test set is translated into 14 languages by professional translators to improve multilingual AI performance and accuracy.\nNumber of rows: 393,176\nSize of the auto-converted Parquet files: 124 MB\nKey feature: Aiming to improve the multilingual capabilities of AI models, ensuring they perform accurately across languages, particularly for underrepresented communities.",
"icon": "https://drive.google.com/file/d/1pRcIEe8BgZlbig7SmB9dXeOioXlzC5IF/view?usp=drive_link",
"icon": "https://cdn-avatars.huggingface.co/v1/production/uploads/1620805164087-5ec0135ded25d76864d553f1.png",
"url": "https://huggingface.co/datasets/openai/MMMLU",
"color": "#323185",
"x": 0.0,
Expand All @@ -81,7 +81,7 @@
"subname": "Argilla",
"bullets": ["Provides unique persona traits for synthetic outputs", "Enhances the diversity and specificity of synthetic outputs"],
"description": "Allows AI researchers and engineers to easily integrate unique persona traits into text generation systems, thereby enhancing the diversity and specificity of synthetic outputs without the complexity of crafting detailed attributes from scratch.\nNumber of rows: 42,142,456\nSize of the auto-converted Parquet files: 143 GB\nKey feature: Focus on providing personas with specific expertise, career paths, or personal interestswhich allow for more nuanced and targeted content.",
"icon": "https://drive.google.com/file/d/1v9ugBO_oJzcEJSViQXv2EBX0W36c9a5Z/view?usp=drive_link",
"icon": "https://cdn-avatars.huggingface.co/v1/production/uploads/1664307416166-60420dccc15e823a685f2b03.png",
"url": "https://huggingface.co/datasets/argilla/FinePersonas-v0.1",
"color": "#EB321B",
"x": 0.0,
Expand All @@ -92,7 +92,7 @@
"subname": "Beijing Academy of Artificial Intelligence (BAAI)",
"bullets": ["Large-scale instruction dataset", "Curated to advance open-source model fine-tuning"],
"description": "A high quality, scalable instruction dataset designed to advance open-source model fine-tuning and research.\nNumber of rows: 7,449,106",
"icon": "https://drive.google.com/file/d/1sLl9DeUWWHsMjK1OKogwRsNhreWKGmIm/view?usp=drive_link",
"icon": "https://cdn-avatars.huggingface.co/v1/production/uploads/1664511063789-632c234f42c386ebd2710434.png",
"url": "https://huggingface.co/datasets/BAAI/Infinity-Instruct",
"color": "#8940A8",
"x": 0.0,
Expand All @@ -103,7 +103,7 @@
"subname": "LLM360",
"bullets": ["Globally filters 99 Common Crawl snapshots", "Curated for LLM pretraining and data weighting"],
"description": "The first dataset to globally deduplicate 99 CommonCrawl snapshots and 14 commonly used non-web data sources, thereby offering scalable, high-quality data for pretraining performant models.",
"icon": "https://drive.google.com/file/d/1W8wA_cSri7E4Ecabf3C3O5Ozezfh8PI-/view?usp=drive_link",
"icon": "https://cdn-avatars.huggingface.co/v1/production/uploads/644bf65522d211df6444a7f4/7B9Y9bkBn6K1NDwlZH3dx.png",
"url": "https://huggingface.co/datasets/LLM360/TxT360",
"color": "#E95C00",
"x": 0.0,
Expand Down

0 comments on commit 6a132c8

Please sign in to comment.