diff options
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/app/_pages/my-models/my-models.component.css | 300 | ||||
| -rw-r--r-- | frontend/src/app/_pages/my-models/my-models.component.html | 144 |
2 files changed, 443 insertions, 1 deletions
diff --git a/frontend/src/app/_pages/my-models/my-models.component.css b/frontend/src/app/_pages/my-models/my-models.component.css index e69de29b..7a480e07 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.css +++ b/frontend/src/app/_pages/my-models/my-models.component.css @@ -0,0 +1,300 @@ +body{ + background-image:url('ann.jpg'); + background-repeat: no-repeat; + width: 100%; + height: 100%; + background-size:100% 150%; + font-size: 20px; + font-family: sans-serif; + color: #001B2E; + +} +p{ + margin-left:5% +} +#container{ + background-color: #F8F4F0; + width: 1300px; + height: 700px; + margin: auto; + color: #001B2E; +} +#navbar{ + background-color: #001B2E; + width: 100%; + height: 10%; + margin: 0; +} +#info{ + background-color: #F8F4F0; + width: 100%; + height: 5%; + margin: 0; +} +#search{ + background-color: white; + width: 70%; + height: 100%; + margin: 0; + margin-top: 0; +} +#main{ + position: relative; + background-color: #88B7B5; + width:100%; + height: 99%; + margin: 0; + display: table; +} +#rows{ + position: absolute; + background-color: whitesmoke; + width: 30%; + height: 88%; + margin: auto; + margin-top:1%; + margin-left: 1%; + + float:left; + overflow:scroll; + overflow-x: hidden; + +} +.datasetinfo { + position: relative; + width: 97%; + height: 10%; + margin: auto; + background-color: #E03616; + display: inline-block; + margin-top: 2%; + margin-left: 1%; + box-shadow: 0 7px 7px -3px buttonshadow; + color: whitesmoke; +} +.id{ + position: relative; + width: 5%; + height: 100%; + background-color:#E03616; + float: left; + margin-left:0.5%; +} +.name { + position: relative; + width: 52%; + height: 100%; + background-color: #E03616; + float: left; + margin-left:0.5%; + margin-right: 1%; +} + +.descriptiondsi { + position: relative; + width: 52%; + height: 100%; + background-color: #E03616; + float: left; + margin-left:0.5%; +} + +.datedsi { + position: relative; + width: 32%; + height: 100%; + background-color: #E03616; + margin-right: 2%; + float: left; + margin-left:0.5%; +} + +.delete { + position: relative; + width: 5%; + height: 50%; + background-color: #E03616; + float: left; + margin-left:0.5%; + margin-top: 4%; +} +.delete img{ + position: relative; + width: 100%; + height: 100%; + background-color: #E03616; + float:right; + margin: auto; + +} +#totalcount{ + background-color: whitesmoke; + width: 30%; + height:5%; + margin: auto; + margin-top:49%; + margin-left: 1%; + position:absolute; + float:left; + +} + +#right{ + background-color:#88B7B5; + width: 67%; + height: 97%; + margin: auto; + margin-top:1%; + margin-left: 32%; + position: absolute; + float:right; + color: #001B2E; +} +#infor{ + background-color:#eff5f5; + width: 73%; + height: 5%; + margin-left: 27.5%; + margin-top: 0%; + position: relative; + color: #001B2E; + color: #001B2E; + text-align: center; +} +#show{ + font-size: 75%; + background-color:#eff5f5; + width: 97%; + height: 80%; + margin: auto; + margin-top: 2%; + position: relative; + color: #001B2E; + margin-left: 3%; + +} +#description{ + color: #001B2E; + background-color:#eff5f5; + width: 97%; + height: 10%; + overflow: scroll; + overflow-x: hidden; + margin: auto; + margin-top: 1%; + margin-left: 3%; + position: relative; +} +#columnsshow{ + background-color:#eff5f5; + width: 100%; + height: 10%; + margin: auto; + margin-top: 1%; + position: relative; + color: #001B2E; + +} +#iocolumns{ + background-color:#eff5f5; + width: 100%; + height: 20%; + margin: auto; + margin-top: 1%; + position: relative; + color: #001B2E; +} +#params{ + display: table; + background-color:#eff5f5; + width: 100%; + height: 20%; + margin: auto; + margin-top: 2%; + position: relative; + color: #001B2E; +} +#paramsp{ + background-color:#eff5f5; + width: 45%; + height: 90%; + margin: auto; + margin-top: 0%; + position: relative; + float:left; + color: #001B2E; +} +#paramst{ + background-color:#eff5f5; + width: 45%; + height: 90%; + + margin-top: 0%; + margin-right: 2%; + position: relative; + float:right; + color: #001B2E; +} +#table{ + background-color:#eff5f5; + width: 97%; + height: 15%; + margin: auto; + margin-top: 2%; + position: relative; + color: #001B2E; + border-bottom: 1px solid #88B7B5; + border-top: 1px solid #88B7B5; +} +table{ + width:100%; + height: 100%; + margin: auto; + text-align: center; + color: #001B2E; +} +#footer{ + display: table; + background-color:#eff5f5; + width: 100%; + height: 10%; + margin: auto; + margin-top: 2%; + position: relative; + color: #001B2E; +} +#created{ + background-color:#eff5f5; + width: 30%; + height: 100%; + margin: auto; + margin-top: 1%; + margin-left: 1%; + position: relative; + float:left; + font-size: 100%; + color: #001B2E; +} +#delete{ + background-color:#E03616; + width: 100%; + height: 14%; + margin: auto; + margin-top: 2%; + color: #F8F4F0; + position: relative; + float:right; + font-size: 150%; +} +#delete input{ + background-color:#E03616; + width: 100%; + height: 100%; + margin: auto; + border: none; + border-radius: 0; + position: relative; + float:right; + font-size: 100%; + color: #001B2E; +} diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html index 2fea257d..d5fa85c1 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ b/frontend/src/app/_pages/my-models/my-models.component.html @@ -1 +1,143 @@ -<p>my-models works!</p> +<div id="container"> + <div id="navbar"> + + </div> + + <div id="info"> <!-- + <div id="user"> + <div id="picture"></div> + <div id="username"></div> + </div> + <div id="search"> + <div id="datesearch"></div> + <div id="projectname"></div> + </div>--> + </div> + <div id="main"> + + <div id="rows"> + <div class="datasetinfo"> + <div class="id"><p>1</p></div> + <div class="name"><p>Titanic.csv</p></div> + <!--<div class="descriptiondsi"></div>--> + <div class="datedsi"><p>21.03.2022</p></div> + <div class="delete"><img src="bin.png" alt="delete"/></div> + </div> + <div class="datasetinfo"> + <div class="id"><p>1</p></div> + <div class="name"><p>Titanic.csv</p></div> + <!--<div class="descriptiondsi"></div>--> + <div class="datedsi"><p>21.03.2022</p></div> + <div class="delete"><img src="bin.png" alt="delete"/></div> + </div> + <div class="datasetinfo"> + <div class="id"><p>1</p></div> + <div class="name"><p>Titanic.csv</p></div> + <!--<div class="descriptiondsi"></div>--> + <div class="datedsi"><p>21.03.2022</p></div> + <div class="delete"><img src="binred.png" alt="delete"/></div> + </div> + </div> + <div id="totalcount"> + UKUPNO TRENIRANIH:3 + </div> + + + + <div id="right" style="display:table"> + + <div style="float:left; margin-left: 9%;">NAZIV:</div> + <div id="infor"> + Titanic.csv + </div> + <div id="description"> + <p>OPIS</p> + <p style="text-align:justify;color: #001B2E; width: 95%; margin: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam metus ut malesuada laoreet. Nulla nulla felis, rhoncus id gravida eget, interdum vel dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> + </div> + <div id="show"> + <div id=columnsshow> + <div>KOLONE</div> + <div id="columns"></div> + </div> + + <div id='iocolumns' style="width:98%; margin-left: 2%" > + + <div id="inputcol" style="display:table; width: 98%"> + <div style="float:left;margin-right: 3%;">ULAZNE KOLONE </div> + Pclass, Ticket, Cabin, Embarked + </div> + <div id="outputcol" style=" width: 98%" > + IZLAZNA KOLONA: Survived + + </div> + </div> + <div id='params'> + <div id='paramsp'> + <p>PARAMETRI PREPROCESIRANJA</p> + <table style="text-align:justify; border-top: 1px solid #88B7B5; margin-left: 3%"> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="randomorder">Nasumicno raspoređivanje podataka</td><td> da </td> + </tr> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="randomtestsetdistribution">Veličina testnog skupa</td><td> 0,3</td> + </tr> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="encoding">Metoda enkodiranja</td><td> label</td> + </tr> + </table> + </div> + <div id='paramst'> + + <p>PARAMETRI OBUKE</p> + <table style="text-align:justify; border-top: 1px solid #88B7B5; margin-right: 3%"> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="type" >Tip</td><td> potpuno povezana</td> + </tr> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="optimizer">Optimizator</td><td> adam</td> + </tr> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="lossfunction">Funkcija gubitka</td><td> mean_squared_error</td> + </tr> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="batchsize">Broj uzoraka</td><td> 5</td> + </tr> + <tr style="box-shadow: 0 0px 5px 0px #88B7B5;"> + <td id="hiddenlayers">Broj skrivenih slojeva</td><td> 1</td> + </tr> + </table> + </div> + + </div> + <!--">Broj ulaznih neurona: 1</div> + </div> + <div id="hiddenlayerneurons">Broj neurona u skrivenom sloju: 1</div> + + <div id="inputlayeractiovation">Aktvaciona funkcija ulaznog sloja: sigmoid</div> + <div id="hiddenlayeractivation">Aktvaciona funkcija uskrivenog sloja: sigmoid</div> + <div id="outputlayeractivation">Aktvaciona funkcija izlaznog sloja: sigmoid</div> +--> + <div id='table'> + <table> + <tr> + <th>PARAMETAR</th><th>ULAZNI SLOJ</th><th>SKRIVENI SLOJ</th><th>IZLAZNI SLOJ</th> + </tr> + <tr> + <td>BROJ NEURONA</td><td>1</td><td>1</td><td>1</td> + </tr> + <tr> + <td>AKTIVACIONA FUNKCIJA</td><td>sigmoid</td><td>sigmoid</td><td>sigmoid</td> + </tr> + + </table> + </div> + <div id='footer'> + <div id='created'>DATUM KREIRANJA:<br>20.3.2022</div> + + </div> + <div id='delete'><input type="button" name="delete" style='color: #F8F4F0' value="BRISANJE TRENIRANOG MODELA"></div> + </div> + </div> + </div> + + </div>
\ No newline at end of file |