Commit 64f9c47d authored by Marcel Hauck's avatar Marcel Hauck

added tech-readiness, updated input and products

parent b13bf286
......@@ -14,7 +14,6 @@ a:link, a:visited, a:hover, a:focus, a:active, a:visited:hover {
}
.product-wrapper {
width: 79px;
border: 2px solid #ccc;
padding: 3px;
margin-bottom: 0.5rem;
font-size: 0.6rem;
......@@ -27,12 +26,59 @@ a:link, a:visited, a:hover, a:focus, a:active, a:visited:hover {
margin-bottom: 5px;
display: inline-block;
}
.counter-text{
font-size: 0.75em;
}
.list-inline-item:nth-child(6n){
margin-right: 0;
}
.product-link{
vertical-align: middle;
}
.product-name{
display:block;
}
.ai-technology, .legend-item-ai-technology-icon{
margin-top: 0.25em;
margin-left: 0.1em;
margin-right: 0.1em;
color: #000;
background-color: #f2f2f2;
border-radius: 100%;
border: 1px solid #ccc;
width: 30px;
height: 15px;
font-size: 9px;
display: inline-block;
}
/*
LEGEND
*/
.row-legend{
margin-bottom: 2em;
}
.legend-description{
font-weight: bold;
}
.legend-item{
display: inline-block;
}
.legend-item div{
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 0.5em;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.legend-item-mediatype div{
border-style: solid;
border-width: 2px;
width: 100px;
}
.mediatype-text{
border-color: #f8cd5d;
}
......@@ -51,21 +97,35 @@ a:link, a:visited, a:hover, a:focus, a:active, a:visited:hover {
.mediatype-other{
border-color: #6ecbd2;
}
.legend-item{
display: inline-block;
.legend-item-trl div{
border-color: #aaa;
}
.legend-item div{
.trl-unknown{
border-style: none;
border-width: 2px;
}
.trl-basic-research{
border-style: dotted;
border-width: 2px;
}
.trl-applied-research{
border-style: dashed;
border-width: 2px;
}
.trl-first-applications{
border-style: solid;
width: 100px;
margin-top: 0.5em;
margin-bottom: 0.5em;
text-align: center;
display: inline-block;
border-width: 2px;
}
.counter-text{
font-size: 0.75em;
.trl-mass-production{
border-style: groove;
border-width: 4px;
}
.list-inline-item:nth-child(6n){
margin-right: 0;
.legend-item-ai-technology{
display: block;
}
.legend-item-ai-technology div{
padding: 0;
}
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 212.3 39" style="enable-background:new 0 0 212.3 39;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#C90900;}
</style>
<rect id="XMLID_332_" class="st0" width="120" height="39"/>
<rect id="XMLID_331_" x="120" class="st1" width="92.3" height="39"/>
<path id="XMLID_722_" d="M24,13.8c-2.2-0.8-4.3-1.1-6.1-1.1c-1.8,0-3.2,0.4-3.2,1.6c0,0.9,0.6,1.2,3.6,2.4c4.2,1.5,6.8,3.4,6.8,7.4
c0,5-3.9,7.7-10.5,7.7c-2.8,0-5.4-0.3-7.8-1L7.4,25c2.4,0.9,5.1,1.4,6.8,1.4c2,0,3.2-0.5,3.2-1.7c0-0.9-0.9-1.6-3.9-2.7
C10.1,20.5,7,19.1,7,15c0-5.7,5.3-7.7,10.6-7.7c2.7,0,4.9,0.3,6.9,0.7L24,13.8z"/>
<path id="XMLID_720_" d="M45.2,18.5c-0.2-1.3-0.5-3.7-0.7-5.4h-0.1c-0.1,1.7-0.4,4.2-0.6,5.4L42,31.2H31.2L26.3,7.8h8.1L36,18
c0.1,0.8,0.7,5.2,0.9,7.2H37c0.2-2,0.8-6.4,0.9-7.2l1.4-10.2H50L51.6,18c0.1,0.8,0.8,5.3,1,7.2h0.1c0.1-1.9,0.7-6.1,0.8-7.2
l1.6-10.2h7.6L58,31.2H47.3L45.2,18.5z"/>
<path id="XMLID_718_" d="M65.1,7.8h7.7v23.5h-7.7V7.8z"/>
<polygon class="st0" points="178,13.1 172.5,7.6 166.1,14 159.7,7.6 154.2,13.1 160.6,19.5 154.2,25.9 159.7,31.4 166.1,25
172.5,31.4 178,25.9 171.6,19.5 "/>
<polygon class="st0" points="151.2,7.8 143.3,7.8 135.6,7.8 127.7,7.8 127.7,15.5 135.6,15.5 135.6,31.3 143.3,31.3 143.3,15.5
151.2,15.5 "/>
<polygon class="st0" points="204.5,7.8 196.6,7.8 188.9,7.8 181,7.8 181,15.5 188.9,15.5 188.9,31.3 196.6,31.3 196.6,15.5
204.5,15.5 "/>
<path id="XMLID_701_" d="M93,13.8c-2.2-0.8-4.3-1.1-6.1-1.1c-1.8,0-3.2,0.4-3.2,1.6c0,0.9,0.6,1.2,3.6,2.4c4.2,1.5,6.8,3.4,6.8,7.4
c0,5-3.9,7.7-10.5,7.7c-2.8,0-5.4-0.3-7.8-1l0.6-5.8c2.4,0.9,5.1,1.4,6.8,1.4c2,0,3.2-0.5,3.2-1.7c0-0.9-0.9-1.6-3.9-2.7
c-3.4-1.5-6.5-2.9-6.5-7c0-5.7,5.3-7.7,10.6-7.7c2.7,0,4.9,0.3,6.9,0.7L93,13.8z"/>
<path id="XMLID_699_" d="M112.6,13.8c-2.2-0.8-4.3-1.1-6.1-1.1c-1.8,0-3.2,0.4-3.2,1.6c0,0.9,0.6,1.2,3.6,2.4
c4.2,1.5,6.8,3.4,6.8,7.4c0,5-3.9,7.7-10.5,7.7c-2.8,0-5.4-0.3-7.8-1L96,25c2.4,0.9,5.1,1.4,6.8,1.4c2,0,3.2-0.5,3.2-1.7
c0-0.9-0.9-1.6-3.9-2.7c-3.4-1.3-6.5-2.7-6.5-6.8c0-5.7,5.3-7.7,10.6-7.7c2.7,0,4.9,0.3,6.9,0.7L112.6,13.8z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1341 224.3" style="enable-background:new 0 0 1341 224.3;" xml:space="preserve">
<title>vidinetheightfix</title>
<g id="Layer_2">
<g id="Layer_1-2">
<g id="Layer_2-2">
<g id="Layer_1-2-2">
<path d="M0,105.1V59.5h45.5V105L0,105.1z M0,164.6v-45.5h45.5v45.5H0z M0,224.1v-45.5h45.5v45.5H0z M59.5,178.6H105
c0.2,12.1-4.6,23.8-13.4,32.2c-8.4,8.7-20,13.5-32.1,13.3V178.6z M119.1,105.1V59.5h45.5V105L119.1,105.1z M119.1,164.6v-45.5
h45.5C164.6,144.2,144.2,164.6,119.1,164.6z"/>
<path d="M239.8,59.3h45.7V105c-12.2,0.2-23.9-4.7-32.3-13.4C244.4,83.2,239.6,71.5,239.8,59.3z M239.8,164.8v-45.7h45.7v45.7
H239.8z M239.8,224.3v-45.7h45.7v45.7H239.8z"/>
<path d="M406,59.5V105h-45.5C360.5,79.9,380.9,59.5,406,59.5z M360.5,164.4v-45.5H406v45.5H360.5z M406,178.2v45.5
c-25,0.1-45.4-20.2-45.5-45.2l0,0l0,0v-0.3H406z M419.8,105.1V59.5h45.5V105L419.8,105.1z M419.8,223.7v-45.5h45.5v45.5H419.8z
M479.1,45.7V0.2h45.5v45.5H479.1z M479.1,105.1V59.5h45.5c0.2,12.1-4.6,23.8-13.4,32.2C502.8,100.4,491.2,105.2,479.1,105.1
L479.1,105.1z M524.7,118.9v45.5h-45.5c0-25.1,20.2-45.5,45.3-45.5l0,0L524.7,118.9L524.7,118.9z M479.1,223.7v-45.5h45.5
c0,25.1-20.2,45.5-45.3,45.5l0,0H479.1L479.1,223.7z"/>
<path d="M599.9,59.3h45.7V105c-12.2,0.2-23.9-4.7-32.3-13.4C604.5,83.2,599.7,71.5,599.9,59.3z M599.9,164.8v-45.7h45.7v45.7
H599.9z M599.9,224.3v-45.7h45.7v45.7H599.9z"/>
<path d="M720.8,59.7h45.5v45.5C741.2,105.2,720.8,84.8,720.8,59.7z M720.8,164.8v-45.7h45.5v45.7H720.8z M720.8,224.3v-45.7
h45.5v45.7H720.8z M780.3,105.3V59.7h45.5v45.5L780.3,105.3z M885.4,105.3h-45.5V59.7c25-0.1,45.4,20.2,45.5,45.2l0,0l0,0V105.3
L885.4,105.3z M839.8,164.8v-45.7h45.5v45.7H839.8z M839.8,224.3v-45.7h45.5v45.7H839.8z"/>
<path d="M1006.3,105.3h-45.7c0-25.2,20.4-45.7,45.7-45.7l0,0V105.3z M960.6,164.8v-45.7h45.7v45.7H960.6z M960.6,178.6h45.7
v45.7c-25.2,0-45.7-20.3-45.7-45.5l0,0C960.6,178.7,960.6,178.7,960.6,178.6z M1020.1,105.3V59.5h45.7v45.7L1020.1,105.3z
M1020.1,119.1h45.7c0.1,12.1-4.8,23.8-13.5,32.2c-8.4,8.7-20.1,13.6-32.2,13.5L1020.1,119.1L1020.1,119.1z M1020.1,224.3v-45.7
h45.7v45.7H1020.1z M1079.6,59.5h45.7c0.2,12.2-4.6,23.9-13.4,32.3c-8.5,8.7-20.2,13.6-32.3,13.4L1079.6,59.5z M1125.4,224.3
h-45.7v-45.7C1104.9,178.6,1125.4,199.1,1125.4,224.3z"/>
<path d="M1222,105.3h-45.7c-0.2-12.1,4.6-23.8,13.3-32.3c8.5-8.8,20.2-13.6,32.4-13.4L1222,105.3L1222,105.3z M1280.1,45.7
h-45.7c-0.2-12.2,4.7-23.9,13.4-32.3c8.5-8.7,20.2-13.6,32.3-13.4L1280.1,45.7L1280.1,45.7z M1234.4,105.3V59.5h45.7v45.7
L1234.4,105.3z M1234.4,164.8v-45.7h45.7v45.7H1234.4z M1295.4,59.5h45.6c0.2,12.1-4.6,23.8-13.3,32.3
c-8.5,8.8-20.2,13.6-32.4,13.4L1295.4,59.5z M1234.4,223.7V178h45.7v45.7H1234.4z"/>
</g>
</g>
</g>
</g>
</svg>
......@@ -2,54 +2,94 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>AI Media Technology Landscape</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="http://wimm.hs-mainz.de"><img src="img/HSM_Logo_W_orange_SC.svg" alt="Hochschule Mainz"></a>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>AI Media Technology Landscape <span class="counter-text">(<span id="count-total">0</span> Produkte)</span></h1>
</div>
</div>
<div class="row" id="row-products"></div>
<div class="row-legend">
<h2>Legende</h2>
<div>Was ist der Output des Produktes?</div>
<div class="legend-item"><div class="mediatype-text">Text</div> </div>
<div class="legend-item"><div class="mediatype-picture">Bild</div> </div>
<div class="legend-item"><div class="mediatype-video">Video</div> </div>
<div class="legend-item"><div class="mediatype-audio">Audio</div> </div>
<div class="legend-item"><div class="mediatype-mixed">Gemischt</div> </div>
<div class="legend-item"><div class="mediatype-other">Sonstiges</div> </div>
<div class="row">
<div class="col-md-12">
<h1>AI Media Technology Landscape <span class="counter-text">(<span id="count-total">0</span> Produkte)</span></h1>
</div>
</div>
<div class="row" id="row-products"></div>
<div class="row-legend">
<h2>Legende</h2>
<div class="legend-description">Was ist der Output des Produktes?</div>
<div class="legend-item legend-item-mediatype">
<div class="mediatype-text">Text</div>
</div>
<div class="legend-item legend-item-mediatype">
<div class="mediatype-picture">Bild</div>
</div>
<div class="legend-item legend-item-mediatype">
<div class="mediatype-video">Video</div>
</div>
<div class="legend-item legend-item-mediatype">
<div class="mediatype-audio">Audio</div>
</div>
<div class="legend-item legend-item-mediatype">
<div class="mediatype-mixed">Gemischt</div>
</div>
<div class="legend-item legend-item-mediatype">
<div class="mediatype-other">Sonstiges</div>
</div>
<div class="legend-description">Technology-Readiness-Level</div>
<div class="legend-item legend-item-trl">
<div class="trl-basic-research">Grundlagenforschung </div>
</div>
<div class="legend-item legend-item-trl">
<div class="trl-applied-research">Angewandte Forschung </div>
</div>
<div class="legend-item legend-item-trl">
<div class="trl-first-applications">Erste Anwendungen </div>
</div>
<div class="legend-item legend-item-trl">
<div class="trl-mass-production">Massenproduktion </div>
</div>
</div>
<div class="legend-description">Genutzte KI-Technologien</div>
<div class="legend-item legend-item-ai-technology">
<div class="legend-item-ai-technology-icon">CNN</div> = Convolutional Neural Network
</div>
<div class="legend-item legend-item-ai-technology">
<div class="legend-item-ai-technology-icon">HBN</div> = Hierarchical Bayesian Networks
</div>
<div class="legend-item legend-item-ai-technology">
<div class="legend-item-ai-technology-icon">NN</div> = Neural Network
</div>
<div class="legend-item legend-item-ai-technology">
<div class="legend-item-ai-technology-icon">LSTM</div> = Long Short-Term Memory
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
......@@ -9,7 +9,7 @@
<body>
<div id='editor_holder'></div>
<button id='submit'>Submit (console.log)</button>
<img style="display: block; margin-top: 50px;" width="100%" src="img/Wertkette_Medienunternehmen.svg">
<script src="vendor/jquery/jquery.min.js"></script>
......@@ -47,6 +47,20 @@
description: {
type: "string"
},
technologyReadinessLevel: {
"type": "string"
},
aiTechnologiesUsed: {
"type": "array",
"uniqueItems": true,
"items": {
"type": "string",
enum: ["CNN", "NN", "LSTM"],
options: {
enum_titles: ["Convolutional Neural Network", "Neural Network", "Long Short-Term Memory"]
}
}
},
categories: {
"type": "array",
"uniqueItems": true,
......
......@@ -2,8 +2,8 @@ $( document ).ready(function() {
// switches for displaying various information
var showProductCount = true;
var showLegend = true;
var showTitle = true;
var showNavbar = false;
var showTitle = false;
// configuration files
var requestCategories = $.getJSON( "json/categories.json" );
var requestProducts = $.getJSON( "json/products.json" );
......@@ -20,7 +20,7 @@ $( document ).ready(function() {
$.each( dataCategories[0], function() {
currentCategoryShort = this.nameShort;
currentCategoryLong = this.nameLong;
currentProductCount = 0;
currentProductNameCount = 0;
html = `
<div class="category-wrapper col-md-6" id="${currentCategoryShort}">
......@@ -47,6 +47,14 @@ $( document ).ready(function() {
currentLink = this.link;
currentDescription = this.description;
currentCategories = this.categories;
currentAiTechnologiesUsed = this.aiTechnologiesUsed;
// add appropriate css classes for technology readiness level and mediatype
if(this.technologyReadinessLevel == ""){
currentTechnologyReadinessLevel = "trl-unknown";
}else{
currentTechnologyReadinessLevel = "trl-" + this.technologyReadinessLevel;
}
if(this.mediatype.length > 1){
currentMediatype = "mediatype-mixed";
} else{
......@@ -57,16 +65,22 @@ $( document ).ready(function() {
$.each( currentCategories, function(key, currentCategory) {
// only show manufacturer if it isn't the same as the product name
if(currentManufacturer != currentName){
currentProduct = currentManufacturer + " <b>" + currentName + "</b>";
currentProductName = currentManufacturer + " <b>" + currentName + "</b>";
} else{
currentProduct = "<b>" + currentName + "</b>";
currentProductName = "<b>" + currentName + "</b>";
}
html = `
<li class="product-wrapper text-center list-inline-item ${currentMediatype}">
<li class="product-wrapper text-center list-inline-item ${currentMediatype} ${currentTechnologyReadinessLevel}">
<a href="${currentLink}" title="${currentDescription}" target="_blank" class="product-link">
<img class="logo" src="img/${currentLogo}">
<span class="product-name">${currentProduct}</span>
<span class="product-name">${currentProductName}</span>`;
$.each(currentAiTechnologiesUsed, function (index, value){
if(value != ""){
html += `<div class="ai-technology">${value}</div>`;
}
});
html += `
</a>
</li>
`;
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment