diff --git a/assets/css/product-details.css b/assets/css/product-details.css index e69de29..d3310a4 100644 --- a/assets/css/product-details.css +++ b/assets/css/product-details.css @@ -0,0 +1,108 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); +body{ + + margin: 2px 0px 0px 171px; + background: #F5F5F5; +} +.container{ + height: 10vh; + text-decoration: none; + text-align: center; + display: flex; + justify-content: center; + margin-right: 400px; + +} +.heading{ + padding-right: 20px; + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: center; + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 19px; + color: #000000; +} +.heading::before{ + content: ""; + background: #000100; + display: block; + margin-left: 20px; + height: 1px; + width: 50px; +} +.heading::after{ + content: ""; + background: #000100; + margin-left: 20px; + display: block; + width: 50px; + height: 1px; +} +.text h1{ + + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 16px; + padding-bottom: 0px; + + color: #000000; +} +.text h1 i { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 14px; + padding-bottom: 0px; +} +em{ + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 17px; + color: #699BF7; +} +i{ + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #000000; +} +.text p { + padding-bottom: 0px; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 17px; + margin-left: 19px; + color: #000000; +} +.metrics{ + display: flex; + margin-left: 19px; +} +.metrics small{ + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 17px; + color: #000000; +} +.number b img{ + display: inline; +} +.number { + margin-left: 10px; + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 20px; +} diff --git a/assets/css/product.css b/assets/css/product.css index e69de29..c6f23c1 100644 --- a/assets/css/product.css +++ b/assets/css/product.css @@ -0,0 +1,963 @@ +:root { + --yellow: #f59221; +} +:root { + --yellow: #f59221; +} +body { + width: 100vw; + box-sizing: border-box; + /* height: 100vh; */ + overflow-x: hidden; + padding: 0px; + margin: 0px; +} +.conttainer { + width: 90%; + margin: 30px auto; + display: flex; + flex-direction: column; +} +/* Header */ +#nav { + height: 110px; + background: rgba(0, 39, 1, 1); +} +header { + width: 100%; + height: 60px; + box-sizing: border-box; + display: flex; + justify-content: space-around; + gap: 10px; + z-index: 2; + position: sticky; + top: 0px; +} +.logo { + width: 100px; + height: 120px; + margin-top: 10px; + margin-left: 40px; +} +.logo img { + width: 80px; + height: 80px; +} + +.menu { +} +.menu ul { + display: flex; + list-style: none; + margin-left: -150px; + transform: translate(-60px); +} + +.menu ul li { + text-decoration: none; + margin: 0px 15px; +} +.menu ul li a { + text-decoration: none; + font-size: 0.8em; + color: white; + font-weight: 400; + font-family: "poppins", monospace; + transition: 0.4s; +} +.menu ul li a:hover { + color: #f59221; +} +.blog-button { + justify-self: flex-end; + /* margin-left: 500px; */ + transform: translateY(50%); + height: 40px; + width: 140px; +} +.blog-button button { + padding: 13px 25px; + border-radius: 40px; + color: black; + font-size: 1em; + font-weight: 600; + font-family: "inter", "poppins", sans-serif; + background: #f59221; + border: none; + display: flex; + animation: move; + transition: 0.4s; +} +.blog-button button:hover { + background: #04391b; + color: white; + border: 1px solid #f59221; + box-shadow: 1px 1px 5px #f59221; +} +.line { + width: 22px; + height: 2.5px; + background: black; + margin-top: 5px; + position: absolute; + right: 0px; +} +.blog { + z-index: 3; +} +.arrow { + border-right: 3px solid black; + border-top: 3px solid black; + height: 10px; + width: 10px; + rotate: 45deg; + border-radius: 2px; + position: absolute; + right: 0; +} +.arr { + display: flex; + gap: -5px; + position: relative; + width: 30px; + margin-left: 5px; +} +.blog-button::before { + content: ""; + text-align: center; + height: inherit; + width: inherit; + display: none; + border-radius: 40px; + background: #002701; + /* transition: 0.5s cubic-bezier(1, 0, 0.6, 1); */ + transition: width 2s; + transition-timing-function: cubic-bezier(0.4, 0.7, 1, 0.1); + position: absolute; +} +.blog-button button:hover .blog-button::before { + width: 100px; +} +.blog-button button:hover .arr { + -ms-transform-origin-x: 12px; + margin-left: 5px; +} +.blog-button button:hover .arrow { + border-right: 3px solid white; + border-top: 3px solid white; +} +.blog-button button:hover .line { + background: white; +} +.blog-button button:hover .blog-button::before { + display: block; + color: white; +} + +@media screen and (max-width: 1920px) { + .header { + height: 50px; + } + .menu ul { + display: flex; + list-style: none; + /* margin-left: -100px; */ + transform: translate(-30px); + } + + .logo { + margin-left: 20px; + } +} + +@media screen and (max-width: 1100px) { + .logo { + margin-left: 20px; + } +} +@media screen and (max-width: 800px) { + .menu ul { + transform: translateX(-60px); + } + .menu ul li { + margin: 0px 12px; + } + .menu ul li a { + font-size: 0.65em; + } + .blog-button { + transform: translateY(50px); + transform: translateX(-30px); + height: 35px; + width: 120px; + } + .blog-button button { + transform: translateY(100%); + padding: 10px 17px; + font-size: 0.75em; + } + .arrow { + border-right: 2px solid black; + border-top: 2px solid black; + height: 10px; + width: 10px; + } + .line { + width: 19px; + height: 2px; + background: black; + } + .arr { + width: 30px; + margin-left: 0px; + } +} +@media screen and (max-width: 600px) { + .blog-button { + display: none; + } + .logo img { + width: 70px; + height: 70px; + } + .menu { + display: none; + } + + .burger { + display: block; + } +} + +/* Header end */ +/* burger menu */ +.burger { + height: 30px; + width: 20px; + /* background: white; */ + transform: translateY(50px); + transform: translateX(-20px); + margin-top: 30px; + padding: 0px 1px; + align-items: center; + display: none; +} +.bline { + background: black; + height: 14%; + width: 100%; + margin: auto; + margin-bottom: 4px; +} +.burger-menu { + display: none; + z-index: 5; + width: 40%; + background: rgb(34, 26, 26); + height: 100%; + position: fixed; + right: 0; + top: 0; + text-align: center; +} +.bmenu { + width: 150px; + text-align: center; + margin: 200px auto; + /* background: red; */ +} +.bmenu ul { + display: block; + list-style: none; +} + +.bmenu ul li { + text-decoration: none; + margin: 15px; +} +.bmenu ul li a { + text-decoration: none; + font-size: 1.05em; + color: white; + font-weight: 500; + font-family: "poppins", monospace; + transition: 0.4s; +} +.bmenu ul li a:hover { + color: #f59221; +} +.cross { + height: 30px; + width: 30px; + border-radius: 50%; + /* background: grey; */ + position: absolute; + top: 50px; + left: 50px; +} +.cross:hover .cro { + background: red; + /* box-shadow: 1px 3px 6px 1px red; */ +} +.cro { + width: 70%; + height: 3px; + background: white; + transition: cubic-bezier(0.075, 0.82, 0.165, 1); + transition: 0.4s; +} +.cross1 { + position: absolute; + top: 13px; + transform: rotate(45deg); + left: 4px; +} +.cross2 { + transform: rotate(135deg); + position: absolute; + top: 13px; + left: 4px; +} + +@media screen and (max-width: 700px) { + .blog-button { + display: none; + } + .logo img { + width: 70px; + height: 70px; + } + .menu { + display: none; + } + + .burger { + display: block; + } + .burger-menu { + width: 70%; + } + .bmenu ul li a { + font-size: 1em; + } +} +/* burger menu end */ +.projects-intro { + padding: 10px 0px; + margin-bottom: 20px; +} + +/* .projects-intro button { + border-radius: 12px; + padding: 5px 30px; + border: none; + background-color: var(--yellow); + color: white; + text-align: center; + font-weight: bold; +} */ + +.projects-Container { + display: flex; + gap: 30px; +} +.card-container { + border: 1px solid; + margin-top: 0%; + justify-content: space-between; + border-radius: 20px 20px 20px 20px; + width: 21%; + height: 9%; +} + +.first { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding-right: 10px; +} +.first p { + font-family: sans-serif; + + font-weight: bolder; +} +.first img { + padding-top: 15px; + height: 19px; +} + +.second img { + padding-left: 49px; + height: 100px; +} +.third { + width: 80%; + margin: 5px auto; +} +.third h3 { + font-size: 14px; + font-weight: bold; +} + +.fourth { + width: 80%; + margin: 5px auto; + display: flex; + justify-content: space-between; + align-items: center; +} +.fourth p { + font-size: 14px; + cursor: pointer; +} +.projects-Container { + display: flex; +} + +.prodContainer { + width: 90%; + margin: auto; + margin: 65px; + display: block; + align-items: center; + justify-content: center; + font-size: 1.2em; + position: relative; + + font-family: "Inter", sans-serif; +} +.upperPart { + margin: 15px 100px; + justify-self: center; +} +.title { + text-align: center; + margin: 0px 00px; +} +.mainTitle { + margin-left: 300px; + + width: 200px; + padding: auto 0px; + font-size: 1.5em; +} +.mainTitle::before, +.mainTitle::after { + content: ""; + font-size: 0.2px; + width: 10px; + margin: 0px 20px 4px 20px; + padding: 2px 40px 0px 40px; + flex: 1 0 20px; + background: black; +} + +.amount { + font-size: 1.15em; + font-weight: 0; +} +.btn { + padding: 7px 15px; + background: rgb(219, 219, 219); + border-radius: 30px; + border: none; + margin-top: -30px; +} + +.btn:hover { + background: rgb(171, 171, 171); +} +.btn.active { + background: orange; + font-weight: 700; + transition: 0.5s; +} +.btn.active:hover { + background: rgb(227, 148, 2); +} + +.status { + position: static; + margin-left: 320px; + width: 350px; + margin-right: 350px; +} +.status .btn { + padding: 10px 20px; + margin: 5px; +} +.align { + display: flex; +} +.lowerPart { + margin: 60px 5px; +} +.align { + margin-bottom: 0; + padding-bottom: 0; +} + +.align .btn { + margin-top: 10px; +} +.align .accomplished p { + font-size: 1em; + margin-right: 20px; + margin-top: 12px; + font-weight: 700; +} +.accomplished .amount { + font-weight: 100; + font-size: 1em; +} +.feedBack { + margin: 0 0 0 30px; +} +/* card boxes */ + +.cards { + margin-left: 60px; + /* */ +} +.upperCards { + display: flex; +} +.lowerCards { + display: flex; +} +.box { + height: 300px; + width: 20%; + border: 1px solid black; + margin: 10px 20px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + font-size: 1em; +} +.box p { + font-size: 0.8em; + margin-bottom: 30px; +} +.rateStar { + display: flex; + flex-direction: row-reverse; + /* margin-right: 25px; */ + font-size: 0.9em; +} +.rateStar p { + margin-top: 0px; +} +.rateStar img { + width: 20px; + height: 20px; + margin: 5px; + margin-top: 0px; +} +.rateStar p { + font-weight: 900; +} +.sttImages img { + align-self: flex-end; + margin-left: 25px; + width: 230px; + height: 100px; + margin-top: -10px; +} +.sttImages-project img { + align-self: flex-end; + margin-left: 25px; + width: 230px; + height: 100px; + margin-top: 10px; +} +.fileImages { + width: 50px; + margin-left: 100px; + margin-top: -40px; +} +.fileImages-project { + width: 50px; + margin-left: 100px; + margin-top: 10px; +} +.ttsImages { + width: 100px; + margin-left: 55px; + margin-right: 5px; + margin-bottom: 50px; +} +.ttsImages-project { + margin-top: 40px; + width: 100px; + margin-left: 55px; + margin-right: 5px; + margin-bottom: 50px; +} +.boxText { + text-align: center; +} +.boxOptions { + display: flex; + justify-content: space-between; + text-align: center; +} +.boxOptions p { + margin: 10px 45px 0 20px; + font-weight: 600; + /* flex-direction: column; */ + font-size: 0.74em; +} +.boxOptions p:hover { + color: orange; + cursor: pointer; +} +.boxOptionsp1 { + margin-left: 30px; +} +.boxOptions #more { + margin-top: 21px; +} + +.fileText { + font-size: 130%; +} + +/* responsive try */ +@media screen and (max-width: 1950px) { + body { + } + + .menu { + margin-top: 20px; + font-size: 1.3em; + } + .upperCards { + display: flex; + } + .status { + margin-left: 400px; + width: 350px; + margin-right: 350px; + } + .lowerCards { + display: flex; + } + .box { + height: 320px; + width: 300px; + border: 1px solid black; + margin: 10px 40px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .cards { + margin-left: 60px; + } + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 320px; + } + .fileText { + font-size: 0.95em; + } +} + +@media screen and (max-width: 1285px) { + .logo { + width: 300px; + height: 100px; + } + .menu { + margin: 20px; + } + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 270px; + } + .status { + margin-left: 340px; + width: 350px; + margin-right: 350px; + } + + .fileText { + font-size: 0.95em; + } + + .boxOptions p { + margin: 10px 45px 0 20px; + font-weight: 600; + font-size: 0.74em; + } + @media screen and (max-width: 1270px) { + } + @media screen and (max-width: 1256px) { + .boxOptions { + display: flex; + text-align: center; + font-size: 0.94em; + } + .cards { + margin-left: 40px; + /* */ + } + .boxOptions p { + margin: 10px 45px 0 20px; + font-weight: 600; + font-size: 0.74em; + } + + .box { + height: 310px; + width: 280px; + margin: 10px 40px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .fileText { + font-size: 100%; + margin-bottom: 0px; + } + .boxOptions { + margin-top: -15px; + } + } + + @media screen and (max-width: 1206px) { + .box { + height: 300px; + width: 260px; + margin: 10px 35px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .fileImages { + width: 45px; + height: 90px; + margin-left: 90px; + margin-top: -45px; + } + .fileText .fileOption p { + font-size: 0.4em; + } + } + + @media screen and (max-width: 1199px) { + .fileImages { + width: 45px; + height: 87px; + margin-left: 90px; + margin-top: -45px; + } + .ttsImages { + width: 95px; + margin-left: 52px; + margin-right: 5px; + margin-bottom: 40px; + margin-top: -12px; + } + .sttImages { + margin-right: 0px; + margin-left: -15px; + margin-top: -12px; + } + .box { + height: 285px; + } + } + @media screen and (max-width: 1100px) { + .fileText { + font-size: 0.91em; + margin-top: -5px; + } + .sttImages { + margin-right: 0px; + margin-left: -15px; + margin-top: -15px; + } + .sttText { + font-size: 0.91em; + } + .ttsText { + font-size: 0.91em; + } + .card { + margin-left: 20px; + } + .mainTitle { + margin-left: 270px; + } + .status { + margin-left: 310px; + width: 350px; + margin-right: 350px; + } + } + @media screen and (max-width: 1030px) { + .status { + margin-left: 200px; + width: 350px; + margin-right: 350px; + } + .lowerCards { + display: flex; + } + .box { + height: 320px; + width: 300px; + border: 1px solid black; + margin: 10px 40px 20px 10px; + border-radius: 5%; + padding: 10px 15px 10px 15px; + } + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 130px; + } + .upperCards { + flex-wrap: wrap; + display: inline-flex; + } + .lowerCards { + flex-wrap: wrap; + display: inline-flex; + } + } + @media screen and (max-width: 900px) { + .title { + text-align: center; + margin: 0px 00px; + } + .mainTitle { + margin-left: 10%; + } + .status { + margin-left: 23%; + width: 350px; + } + } + @media screen and (max-width: 765px) { + .btn { + padding: 7px 17px; + margin-top: -30px; + } + .status .btn { + padding: 12px 22px; + margin: 5px; + } + .lowerPart { + margin: 40px 5px; + } + .align { + margin-bottom: 0; + padding-bottom: 0; + } + + .align .btn { + margin-top: 10px; + } + .align .accomplished p { + font-size: 1.15em; + margin-right: 20px; + margin-top: 15px; + font-weight: 900; + } + .accomplished .amount { + font-weight: 100; + font-size: 1em; + } + } + @media screen and (max-width: 715px) { + .align .accomplished p { + font-size: 1.15em; + margin-right: 20px; + margin-top: 15px; + font-weight: 900; + } + .accomplished .amount { + font-weight: 100; + font-size: 1em; + } + .align .btn { + margin-top: 10px; + } + .upperPart { + margin: 15px 100px; + } + .align { + display: block; + margin-left: 27%; + margin-bottom: 15px; + } + .align p { + margin-left: 20px; + } + .cards { + margin-left: 20%; + } + .feed { + margin-left: 15%; + } + } + @media screen and (max-width: 705px) { + .status { + margin-left: 23%; + width: 350px; + } + .mainTitle::before, + .mainTitle::after { + width: 6px; + margin: 0px 20px 4px 20px; + padding: 2px 30px 0px 30px; + flex: 1 0 20px; + background: black; + } + .prodContainer { + margin: auto; + margin-right: 100px; + } + .accomplished { + font-size: 0.8em; + } + .btn { + margin: 5px; + } + .feedBack { + font-size: 0.85em; + margin-left: 60px; + } + } +} +@media screen and (max-width: 585px) { + .prodContainer { + margin: auto; + margin-right: 100px; + } + .btn { + margin: 2px; + } +} + +@media screen and (max-width: 500px) { + .prodContainer { + margin-left: -15px; + } + .mainTitle { + margin-left: 0%; + margin-right: 5%; + } + .status { + margin-left: 10%; + width: 350px; + } +} diff --git a/assets/img/nlp pic.svg b/assets/img/nlp pic.svg new file mode 100644 index 0000000..5091371 --- /dev/null +++ b/assets/img/nlp pic.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/nlp pic2.png b/assets/img/nlp pic2.png new file mode 100644 index 0000000..38ef02c Binary files /dev/null and b/assets/img/nlp pic2.png differ diff --git a/assets/img/product/sts.png b/assets/img/product/sts.png new file mode 100644 index 0000000..365602e Binary files /dev/null and b/assets/img/product/sts.png differ diff --git a/assets/img/shape/Vector white.svg b/assets/img/shape/Vector white.svg new file mode 100644 index 0000000..8343774 --- /dev/null +++ b/assets/img/shape/Vector white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/shape/Vector.svg b/assets/img/shape/Vector.svg new file mode 100644 index 0000000..49cb0b9 --- /dev/null +++ b/assets/img/shape/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/pages/product-details.html b/pages/product-details.html index 22dbc58..b2844b1 100644 --- a/pages/product-details.html +++ b/pages/product-details.html @@ -9,8 +9,78 @@
-
+ +
+ +

Speech to Text

+ +
+
+

Name: Speech to text (STT) model

+ +

Description :

+

+ The Kinyarwanda Speech-to-Text (STT) Model project is focused on creating an accurate machine learning model for transcribing spoken
+ Kinyarwanda into written text. With over 12 million speakers worldwide, Kinyarwanda is an important language to develop speech
+ recognition technology for.

+ + The project will involve collecting a large dataset of spoken Kinyarwanda and using it to train a deep learning model. The model will be
+ evaluated using metrics such as accuracy and word error rate, and its performance will be compared to other existing STT models for
+ African languages.,
+ The ultimate goal of the project is to improve access to information and communication for Kinyarwanda speakers by enabling them to use
+ voice-enabled technology to interact with digital devices and services. Overall, the Kinyarwanda STT Model project has the potential to
+ make a significant impact in improving accessibility and inclusivity for Kinyarwanda speakers.
+ +

+

License : Speech to text (STT) model

+

Scope :

+

+ The ultimate goal of the project is to improve access to information and communication for Kinyarwanda speakers by enabling them to use
+ voice-enabled technology to interact with digital devices and services. The project's scope appears to be focused on developing a
+ language model for Kinyarwanda specifically, with potential for future applications in speech recognition and natural language processing.
+

+

Timeline : Feb 2023 - March 2023

+

Price : Free

+

Contributors : Rene Promesse, Arnaud, Floris, Samuel

+

Partners/Sponsors : MiniICT

+

Metrics

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Transcription accuracy:4.5 ./s
Word Error Rate (WER):4.5 ./s
Character Error Rate (CER): 4.5 ./s
Sentence Error Rate (SER): 4.5 ./s
Recognition Accuracy:4.5 ./s
Latency:5s ./s
+
+
diff --git a/pages/product.html b/pages/product.html index 789c4a9..0245fc4 100644 --- a/pages/product.html +++ b/pages/product.html @@ -1,15 +1,326 @@ - - - - + + + + Mbaza product List - - - + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + + + + +
+
+
+
+
+ +
+ +
+
+
+

+ Projects +

+
+
+ + +
+
+
+
+
+

Projects accomplished (131)

+
+
+ + + +
+
+
+ +
+
+
+
+
+
+ +

4.5

+
+
+ +
+
+

Speech To Text

+

Speak Kinyarwanda and get the test of the spoken words

+
+
+
+

Try it out

+
+
+

Read more

+
+
+
+
+
+ +

4.5

+
+
+ +
+
+

Text to Speech

+

+ Write Kinyarwanda and get audio voice of the written sentence +

+
+
+

Try it out

+

Read more

+
+
+
+
+ +

4.5

+
+
+ +
+
+

Kinyarwanda Dataset SST

+

+ Over 2000 hours of Kinyarwanda voice data, making it the + second-biggest open voice dataset on the common voice platform +

+
+
+

Download

+

Read more

+
+
+
+
+
+
+ +

4.5

+
+
+ +
+
+

Speech To Text

+

Speak Kinyarwanda and get the test of the spoken words

+
+
+

Try it out

+

Read more

+
+
+
+
+ +

4.5

+
+
+ +
+
+

Text to Speech

+

+ Write Kinyarwanda and get audio voice of the written sentence +

+
+
+

Try it out

+

Read more

+
+
+
+
+ +

4.5

+
+
+ +
+
+

Kinyarwanda Dataset SST

+

+ Over 2000 hours of Kinyarwanda voice data, making it the + second-biggest open voice dataset on the common voice platform +

+
+
+

Download

+

Read more

+
+
+
+
+
+
+

Projects under debvelopment [3]

+

would you like to join and continue

+ +
+
+ +
+
+ +
+ +
+
+

Speech To Text

+

Speak Kinyarwanda and get the test of the spoken words

+
+
+

+

Read more

+
+
+
+ +
+ +
+
+

Text to Speech

+

+ Write Kinyarwanda and get audio voice of the written sentence +

+
+
+

+

Read more

+
+
+
+ +
+ +
+
+

Kinyarwanda Dataset SST

+

+ Over 2000 hours of Kinyarwanda voice data, making it the + second-biggest open voice dataset on the common voice platform +

+
+
+

+

Read more

+
+
+
+ +
+
- - \ No newline at end of file + +