From 7f1d54eb93be623689892ac9065c0aca852c888a Mon Sep 17 00:00:00 2001 From: syke9p3 Date: Sun, 21 Jul 2024 19:26:32 +0800 Subject: [PATCH] improved ui design --- app.js | 9 ++-- index.html | 100 ++++++++++++++++++++++---------------- style.css | 139 ++++++++++++++++++++++++++++++++++++----------------- 3 files changed, 159 insertions(+), 89 deletions(-) diff --git a/app.js b/app.js index b31db76..255af33 100644 --- a/app.js +++ b/app.js @@ -144,8 +144,7 @@ const updateModelStatus = (status) => { if (status === "loading") { modelStatusDisplay.innerHTML = `Loading classifier (will load only once)`; } else if (status === "ready") { - modelStatusDisplay.textContent = "👍 Classifier is up and running."; - modelStatusDisplay.textContent = ""; + modelStatusDisplay.textContent = "👍 Classifier is up and running"; } else if (status === "error") { modelStatusDisplay.textContent = "Error loading classifier"; } else { @@ -275,7 +274,7 @@ clearButton.onclick = (e) => { // TEST: should reset the exampleOptions to default // TEST: should reset word count - inputField.scrollIntoView({ behavior: "smooth" }); + // inputField.scrollIntoView({ behavior: "smooth" }); inputField.value = ""; updateInput() @@ -290,7 +289,6 @@ clearButton.onclick = (e) => { */ const handleSubmitInput = async (input) => { - outputContainer.scrollIntoView({ behavior: "smooth" }); // TEST: should get output from the classifier if successful // TEST: should display output to the UI @@ -301,7 +299,8 @@ const handleSubmitInput = async (input) => { updateModelStatus(modelStatus) debug('model status: ', modelStatus) const output = await classify(globalState.input) - updateModelStatus(modelStatus) + outputContainer.scrollIntoView({ behavior: "smooth" }); + updateModelStatus("ready") setGlobalPrevInput(globalState.input); debug("prev input:", globalState.prevInput) diff --git a/index.html b/index.html index cf4821f..12c736c 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,10 @@

mlthsc.

-
+
-
+

Multilabel Tagalog Hate Speech Classifier

@@ -52,9 +52,9 @@

text in the textbox below. Press the Analyze button to classify the hate speech according to - different categories + different categories - Age, Gender, Physical, Race, Religion, Others. + Age, Gender, Physical, Race, Religion, Others. Click here to learn more. . The classifier accepts a text input from 15 characters up to 280 characters. @@ -115,25 +115,25 @@

-
-
-
- Press Analyze to activate the classifier. -
-
-
+
- -
- - + +
+ + + + +
+
+ Press Classify to activate the hate speech classifier. +
-
+
@@ -288,11 +288,11 @@

Most Frequent Labels Based on Saved

-
+
-
+

What is MLTHSC?

-

+

Multilabel Tagalog Hate Speech Classifier (MLTHSC) is a free to use AI-powered tool designed to classify hate speech in Tagalog text according to Age, Gender, Physical, Race, Religion, and Other categories. It uses a fine-tuned Tagalog Bidirectional Encoder Representation from @@ -300,19 +300,34 @@

What is MLTHSC?

categories of hate speech.

+
- - -
+
    +
  • +

    Automated Detection

    +

    Automatically

    +
    • +
  • +

    Tagalog Language-Specific

    +

    +
    • +
  • +

    Multilabel Classification

    +

    Current hate speech detection models available for Tagalog hate speech text mostly focus + on + detecting the presence of hate in texts but not on providing fine-grained + categorization. + Hate + speech is a complex phenomenon that may vary in themes and platforms + may require a different response or intervention for various targeted groups.

    +
    • +
+
+ --> +

What types of hate speech can MLTHSC detect?

@@ -322,13 +337,14 @@

What types of hate speech can MLTHSC detect?

  • - -

    Age

    -

    Target of hate speech pertains to one's age bracket or demographic

    +
    +

    Age

    +

    Target of hate speech + pertains to one's age bracket or demographic

    +
  • -

    Gender

    Target of hate speech pertains to gender identity, sex, or sexual orientation

    @@ -337,15 +353,17 @@

    Gender

    Physical

    -

    Target of hate speech pertains to physical attributes or disabilities

    +

    Target of hate speech pertains to physical attributes or + disabilities

  • -

    Race

    -

    Target of hate speech pertains to racial background, ethnicity, or nationality

    +

    Race

    +

    Target of hate speech pertains to racial background, ethnicity, + or nationality

  • diff --git a/style.css b/style.css index 0ccd0ea..e6f6cdf 100644 --- a/style.css +++ b/style.css @@ -29,6 +29,7 @@ * { box-sizing: border-box; margin: 0; + scroll-behavior: smooth; } body { @@ -39,11 +40,12 @@ body { color: #202020; font-size: 14px; background-image: linear-gradient(180deg, white, rgb(230, 236, 247)); + background-color: #EEF2F9; } .text-secondary { color: #434242; - font-size: 12px; + font-size: 14px; } .text-center { @@ -88,7 +90,8 @@ ul { } a { - color: #0f8fff; + color: inherit; + text-decoration: none; } main { @@ -101,6 +104,11 @@ section { padding: 30px 0; } +main section { + max-width: 768px; + margin: 0 auto; +} + /* Container Sizes for devices */ .container { margin: 0 auto; @@ -167,10 +175,7 @@ u { color: firebrick; } -/* For Tab Container */ -/* .input-set { - padding: 0 8px 16px 8px; -} */ + /* Tabs for input */ .tabs { @@ -200,28 +205,36 @@ u { /* Input Post Tab */ .input-textbox { + /* background-color: var(--white); */ background-color: #ebeff5; + border: 1px solid #ebeff5; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px; + box-shadow: 0px 1px 2px #20202020; + } -input { - background-color: #ebeff5; +/* For Tab Container */ +.input-set { + padding: 0 8px 16px 8px; } + + textarea { width: 100%; padding: 15px; box-sizing: border-box; border: none; - background-color: #ebeff5; + /* background-color: #ebeff5; */ + /* background-color: var(--white); */ border-radius: 0px; margin-bottom: 12px; resize: none; line-height: 1.5; - min-height: 120px; - font-size: 16px; + min-height: 240px; + font-size: 14px; font-family: Arial, Helvetica, sans-serif; } @@ -245,6 +258,8 @@ textarea { justify-content: center; gap: 4px; transition: all 150ms ease; + font-size: 16px; + } .btn-save { @@ -277,26 +292,21 @@ textarea { border: none; } -.btn-options { - width: 50%; -} .btn-group { gap: 4px; + display: flex; + /* justify-content: end; */ } .btn i { color: inherit; } -.btn-clear { - background-color: firebrick; - color: var(--white); -} .btn-extract, .btn-analyze { - background-color: green; + background-color: #3A36E4; color: var(--white); } @@ -304,6 +314,18 @@ textarea { opacity: 80%; } +.toolbar { + /* display: flex; */ + justify-content: space-between; + flex-wrap: wrap; +} + +.toolbar .toaster { + @media screen and (min-width: 300px) { + /* order: 1; */ + } +} + #imageButton[disabled], #extractButton[disabled], #clear-btn[disabled], @@ -313,10 +335,12 @@ textarea { } .input-display-container { - background-color: #94D6FF; + background-color: #2c698f; min-height: 200px; display: block; - padding: 3rem 1rem; + padding: 1rem 1rem; + max-width: 500px; + margin: 0 auto; /* display: none; */ /* place-items: center; */ } @@ -325,7 +349,7 @@ textarea { border-radius: 4px; background-color: var(--white); border: 1px solid #20202020; - font-size: 16px; + font-size: 14px; font-weight: 500; color: #202020; padding: 1.6rem 2rem; @@ -387,7 +411,7 @@ textarea { } .label { - font-size: 12px; + font-size: 14px; color: var(--white); padding: 8px 16px; border-radius: 32px; @@ -464,7 +488,7 @@ textarea { .banner-title { color: var(--black); - font-size: 25px; + font-size: 32px; } #toggle-labels-btn { @@ -1056,7 +1080,7 @@ footer { position: relative; display: inline-block; cursor: pointer; - text-decoration: underline; + text-decoration: underline #000 dotted } .tooltip:hover { @@ -1065,12 +1089,13 @@ footer { .tooltip .tooltiptext { visibility: hidden; - width: 200px; - background-color: #333; + width: 300px; + background-color: #000; + /* box-shadow: ; */ color: #fff; - text-align: center; + /* text-align: center; */ border-radius: 5px; - padding: 5px; + padding: 10px; position: absolute; z-index: 1000; top: 125%; @@ -1078,6 +1103,7 @@ footer { margin-left: -100px; opacity: 0; transition: opacity 0.3s; + font-size: 12px; } .dark-mode .tooltiptext { @@ -1593,13 +1619,29 @@ footer article { } - +.qna h2 { + font-size: 28px; + color: var(--black); + /* font-weight: 500; */ +} .qna p { line-height: 1.6; + font-size: 16px; +} + +.qna .faq-features { + margin-top: 24px; + /* background-color: red; */ + display: flex; + flex-direction: column; + gap: 12px; + text-align: left; + padding: 0; } -.qna ul { + +.qna .faq-categories { margin-top: 24px; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -1610,39 +1652,47 @@ footer article { grid-template-columns: repeat(2, minmax(0, 1fr)); } + @media (min-width: 1024px) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } -.qna ul li { +.qna .faq-categories li { display: flex; flex-direction: column; align-items: center; max-width: 300px; - background-color: white; - padding: 2rem 1.5rem; + /* background-color: white; */ + /* padding: 2rem 1.5rem; */ border-radius: 4px; @media (min-width: 640px) { - /* background-color: red; */ + /* background-color: red; */ } } -.qna ul li h4 { +.qna .faq-categories li h4 { font-size: 14px; - padding: 4px 12px; + padding: 10px; border-radius: 4px; - color: white + color: white; + width: 100%; } -.qna ul li p { +.qna .faq-categories li p { /* font-size: 16px; */ - padding: 0.5rem 0 0 0; - opacity: 80%; + padding: 0.5rem; + opacity: 90%; + margin-bottom: 1rem; + /* color: var(--white); */ + } -.qna ul li icon { - /* background-color: var(--accent); */ +.qna .faq-categories li icon { + background-color: var(--white); /* color: white; */ width: 50px; height: 50px; @@ -1650,6 +1700,9 @@ footer article { place-items: center; font-size: 32px; margin: 1rem; + margin-bottom: 0.5rem; border-radius: 100px; /* padding: px; */ + /* transform: translateY(105%); */ + border: 2px solid; } \ No newline at end of file