added images of author

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.pdf filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

Data/10_Law/0_Mentioning.qmd

@@ -59,6 +59,7 @@ The second option, if available, is to click on the second link, which shows the
  [giscus](https://github.com/giscus/giscus) | [MIT](https://github.com/giscus/giscus/blob/main/LICENSE) (general copy in [-@sec-chap_Lic])   |
  [hypothesis](https://github.com/hypothesis/h) | [BSD 2-Clause](https://github.com/hypothesis/h/blob/main/LICENSE)    |
  [Feather](https://github.com/feathericons/feather) | [MIT](https://github.com/feathericons/feather/blob/master/LICENSE) (general copy in [-@sec-chap_Lic])  |
+ [Rembg](https://github.com/danielgatis/rembg) | [MIT](https://github.com/danielgatis/rembg/blob/main/LICENSE.txt) (general copy in [-@sec-chap_Lic])  |
 
 : Licenses of used open source tools
 

Data/10_Law/2_Used_Hippocratic.qmd

@@ -145,14 +145,17 @@ _This section identifies additional individuals or entities that a Licensee coul
 
 :::{.callout-tip collapse='true'}
 ### Some background
-This project wanted to use the library [animate.css](https://github.com/animate-css/animate.css).
-However, it turned out that for his web thesis there was no need for it, thus it is not used.
-Nevertheless, reading their license on [Github](https://raw.githubusercontent.com/animate-css/animate.css/main/LICENSE), I found the content very compelling.
-Thus, I want to thank the [animate.css](https://github.com/animate-css/animate.css). 
-Through their project I came to know about the very appealing Hippocratic License. 
-Let me give you some examples why this license agreement is awesome, 
-the [BDS](https://bdsmovement.net/) movement works to highlight and stop the opression conducted by Israels goverment.
-They want to stop international support for Israel's oppression of Palestinians and pressure Israel to comply with international law.
-
- is a movement that wants to highlight the opression against the 
+This project initially intended to use the library [animate.css](https://github.com/animate-css/animate.css). However, it turned out that there was no need for it in this web thesis, so it is not used. Nevertheless, after reading their license on [Github](https://raw.githubusercontent.com/animate-css/animate.css/main/LICENSE), I found the content very compelling.
+
+Thus, I want to thank [animate.css](https://github.com/animate-css/animate.css). Through their project, I came to know about the very appealing Hippocratic License. Let me give you some examples of why this license agreement is awesome: the[BDS](https://bdsmovement.net/) movement works to raise awareness of and combat the oppression conducted by Israel's government. They aim to stop international support for Israel's mistreatment of Palestinians and pressure Israel to comply with international law. Up until that point, I didn't know that one could incorporate such beautiful justice into a license agreement, and I was pleasantly surprised to discover that there has already been significant work done in this area.
+
+Additionally, I found great joy in reading some of the articles of the [Universal Declaration of Human Rights](https://www.un.org/en/about-us/universal-declaration-of-human-rights). I am deeply grateful to have read such familiar articles and witnessed efforts to spread justice across the globe. When I say familiar articles, I mean, they have reminded me of my Quran.
+
+:::
+:::{.callout-tip collapse='true'}
+### License in short
+You are free to use the content of this webpage for whatever you like, including modification, sale, distribution, and more. However, please note that there are some important restrictions: You can do whatever you like with this content as long as it is halal or morally supportable. If you are unsure about a topic, please consult the license agreement.
+
+First, you are not allowed to insult, target minorities or religious groups, support Israel's government, assist India in its oppression in Kashmir, assist the Chinese government's oppression against Uighurs, and so on.
+Second, there is a copyleft - it basically means, your work is mandated to have the same license, i.e., you as well want to make sure that your work cannot be misused.
 :::

Data/8_Add_2_Master/0_Add_2_Mast.qmd

@@ -1,4 +1,4 @@
-# Modification to the original thesis
+# Modification to the original thesis and source code
 
 The author's goal was to leave the content of the master thesis as it was when it was submitted to the TU-Braunschweig.
 It is known by the author of this thesis that some mistakes in the figures text and other smaller mistakes as well do exist.
@@ -43,5 +43,15 @@ So in a nutshell, SVGs are used instead of PDFs, though a conversation process,
 5) the original master thesis PDF was written in Latex (see  chapter [-@sec-chap_Orig_Master_PDF])
 6) The section you are reading right now, is not found in the PDF file, due to obvious reasons 
 
-
-
+## Source code
+For this section, the author of this work would like to switch from the passive voice used in scientific writing to the active voice used for an engaging and friendly tone.
+I initially intended to release the entire code on GitHub, so that everyone could play with it.
+This was also one of the reasons why I invested in code readability during coding.
+However, the code is not my property, as it was written for the TU Braunschweig.
+Dr. Richard Semaan advised me to wait with publishing the source code until he and his team have made more progress towards a publication.
+My experience with Dr. Semaan is that he's a nice guy, and he usually replies within half an hour.
+So maybe he would be willing to share the source code with people who ask him for it.
+You can contact him through the contact information provided at the TU Braunschweig [website](https://www.tu-braunschweig.de/en/ism/research/flow-modelling-and-control/staff/semaan).\newline 
+
+It might be well-known that some people and universities tend to say that the written thesis is what counts.
+Since I have another opinion on that, I would like to apologize - I totally understand that such a thesis is much more valuable and enjoyable with the source code. In fact, I would argue that the code is the most important part of my thesis.

Data/8_Add_2_Master/1_Master_Orig.qmd

@@ -77,8 +77,6 @@ p_Info.style.color="#ecff80";
 
 div_Info.appendChild(p_Info);
 
-console.log(div_Info);
-
 quartoMarginSidebar.appendChild(div_Info);
 
 }

Data/8_Add_2_Master/2_About_Author.qmd

@@ -12,9 +12,20 @@ Since fact listing gives a fast overview about one's experience, I will, inshall
 The CV is not the most up-to-date one, but it still provides useful information about my competencies.
 
 
-![Cluster domains of the Lorenz system @eq-eq_6_Lorenz with $\beta =28$](../../3_Figs_Pyth/2_Task/11_Clust.svg){#fig-fig_14_Clust}
+![Picture of the author](../13_Additional_Data/0_Images/0.png){#fig_Exclude}
 :::
 
+<style>
+.img-fluid{
+  background-color: transparent;
+}
+#fig_Exclude p{
+    /* your style rules for all figures except the one with id "exclude" */
+ text-align: center;
+  }
+ 
+</style>
+
 :::{.callout-note collapse='true'}
 ### What was the purpose of uploading this thesis as a webpage?
 This is a very good question - and I believe I have a lot of answers to that.
@@ -53,9 +64,89 @@ Sure, I get it, you look at me and think, "Wow, I want to know him personally."
 
 Let me tell you a little background story. I myself did not want to wear a beard for a very long time, I found it unattractive and unkempt. However, my wife informed me one day that she thought beards were beautiful. I asked her if I should give it a try. She was pleased, and so my journey with the beard began.
 
-During this time, I began to find great pleasure in wearing my beard. Unfortunately, one day she asked me to remove my beard. Of course, I didn't want to take it off anymore. Long story short, sometimes I look like the first image above, and sometimes as in the second one below.
-
-![Cluster domains of the Lorenz system @eq-eq_6_Lorenz with $\beta =28$](../../3_Figs_Pyth/2_Task/11_Clust.svg){#fig-fig_14_Clust}
+During this time, I began to find great pleasure in wearing my beard. Unfortunately, one day she asked me to remove my beard. Of course, I didn't want to take it off anymore. Long story short, sometimes I look like in the first image above, and sometimes as in the others shown below.
+
+---
+
+<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
+<div class="carousel-indicators">
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
+<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7" aria-label="Slide 8"></button>
+</div>
+<div class="carousel-inner">
+<div class="carousel-item active">
+  <img src="../13_Additional_Data/0_Images/4.jpg" class="d-block w-100" alt="Image not found">
+</div>
+<div class="carousel-item">
+  <img src="../13_Additional_Data/0_Images/2.jpg" class="d-block w-100" alt="Image not found">
+</div>
+<div class="carousel-item">
+  <img src="../13_Additional_Data/0_Images/3.jpg" class="d-block w-100" alt="Image not found">
+</div>
+<div class="carousel-item">
+  <img src="../13_Additional_Data/0_Images/1.jpg" class="d-block w-100" alt="Image not found">
+</div>
+<div class="carousel-item">
+  <img src="../13_Additional_Data/0_Images/5.jpg" class="d-block w-100" alt="Image not found">
+</div>
+<div class="carousel-item">
+  <img src="../13_Additional_Data/0_Images/6.jpg" class="d-block w-100" alt="Image not found">
+</div>
+<div class="carousel-item">
+  <img src="../13_Additional_Data/0_Images/7.jpg" class="d-block w-100" alt="Image not found">
+</div>
+<div class="carousel-item">
+  <img src="../13_Additional_Data/0_Images/8.jpg" class="d-block w-100" alt="Image not found">
+</div>
+</div>
+
+<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Previous</span>
+</button>
+
+<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Next</span>
+</button>
+
+<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Next</span>
+</button>
+
+<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Next</span>
+</button>
+
+<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Next</span>
+</button>
+
+<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Next</span>
+</button>
+
+<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Next</span>
+</button>
+
+<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="visually-hidden">Next</span>
+</button>
+</div>
 
 :::
 

Data/8_Add_2_Master/3_CV.qmd

@@ -107,8 +107,6 @@ p_Info.style.color="#ecff80";
 
 div_Info.appendChild(p_Info);
 
-console.log(div_Info);
-
 quartoMarginSidebar.appendChild(div_Info);
 
 }

README.md

@@ -7,4 +7,26 @@ sdk: static
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Overview
+This is the web verison of my master thesis - the title of the master thesis is: Flow predictions using control-oriented cluster-based network modeling.
+The used license is: [![Hippocratic License HL3-BDS-CL-ECO-EXTR-MEDIA-MIL-SV-XUAR](https://img.shields.io/static/v1?label=Hippocratic%20License&message=HL3-BDS-CL-ECO-EXTR-MEDIA-MIL-SV-XUAR&labelColor=5e2751&color=bc8c3d)](https://firstdonoharm.dev/version/3/0/bds-cl-eco-extr-media-mil-sv-xuar.html)
+
+
+# Abstract 
+
+In this master thesis, a data-driven modeling technique is proposed. 
+It enables making predictions for general dynamic systems for unknown model parameter values or operating conditions.
+The tool is denoted as \gls{cnmc}.
+The most recent developed version delivered promising results for the chaotic Lorenz system [@lorenz1963deterministic].
+Since, the earlier work was restricted to the application of only one dynamical system, with this contribution the first major improvement was to allow \gls{cnmc} to be utilized for any general dynamical system. 
+For this, \gls{cnmc} was written from scratch in a modular manner. 
+The limitation of the number of the dimension and the shape of the trajectory of the dynamical systems are removed.
+Adding a new dynamic system was designed such that it should be as straightforward as possible. 
+To affirm this point, 10 dynamic systems, most of which are chaotic systems, are included by default. 
+To be able to run \gls{cnmc} on arbitrary dynamic systems in an automated way, a parameter study for the modal decomposition method \gls{nmf} was implemented.
+However, since a single \gls{nmf} solution took up to hours, a second option was added, i.e., \gls{svd}. 
+With \gls{svd} the most time-consuming task could be brought to a level of seconds.
+The improvements introduced, allow \gls{cnmc} to be executed on a general dynamic system on a normal computer in a reasonable time. 
+Furthermore, \gls{cnmc} comes with its integrated post-processor in form of HTML files to inspect the generated plots in detail.
+All the parameters used in \gls{cnmc} some additional beneficial features can be controlled via one settings file. 
+

Usage_Info/open.md

@@ -1,25 +1 @@
-3) tag equation, eq_5_NMF
-$$
-\begin{equation}
-    \boldsymbol {A_{i \mu}} \approx \boldsymbol A^{\prime}_{i \mu}  = (\boldsymbol W  \boldsymbol H)_{i \mu}  = \sum_{a = 1}^{r} 
-    \boldsymbol W_{ia} \boldsymbol H_{a \mu}
-    \tag{}
-\end{equation}
-$$ 
-9)  Some images must be redone in inkscape
-    1)  1_Task/1_CNMc.svg
-10) Allow downloading images multiple output formats as you have seen it once
-11) Make sure to mention
-    1)  You are using now a much more powerful tool than a simple pdf or latex (which is already is quite powerful, but clearly not as featurerich as html, css and javascript) --> it was tried to replicate the orignal master thesis pdf --> thus a lot of imporivements which are now possible have been not implemented. However, some features were just to tempting to not implement them. Note, some mistakes which the author made, i.e. spelling and simmilar mistakes were not removed, since it can be considered to be more honest to stick to the original version --> best representation of the master thesis output at that time
-    2)  The reader finds it much easier to get the abbreviations --> thus interactive hover is enabled
-    3)  Maybe some modifications are going to be made. If so, then this shall be highledted lcearly, inshallah (with the premission and help of the allmighty Allah)
-12) praise to the ONE, acknowledge, make the one big
-13) glossary
-14) include pdfs and make sure the order matches with the true pdf
-15) list of figures and tables
-18) share on other webpages
-22) contact information
-23) money buymeacofee or kofi integration
-24) https://animate.style/ add rubberband on headers if clicked
-25) Add all licenses -- correct refering
 26) small gif that shows the capabilties of yout website

Web_Code/CSS/cosmo_Dark.scss

@@ -114,10 +114,13 @@ h1, h2, h3, .header-section-number {
 }
 
 #popper_Tooltip_Gen pre {
-  color: black;
+  color: #000000;
 } 
 
 // the font color of the tooltip
 #popper_Tooltip_Gen pre {
   color: var(--shiny_White);
-}
+}
+
+// see: https://getbootstrap.com/docs/5.0/components/carousel/
+$carousel-control-icon-width: 7rem;

Web_Code/CSS/light.scss

@@ -109,3 +109,7 @@ h1, h2, h3, .header-section-number {
 #popper_Tooltip_Gen  pre{
   color: var(--shiny_White);
 }
+
+
+// see: https://getbootstrap.com/docs/5.0/components/carousel/
+$carousel-control-icon-width: 7rem;

Web_Code/Js/lotti_Sidebar_Anim.js

@@ -23,9 +23,10 @@ function complete_Check(second_Anim){
 
             var path_0 = `../7_Animation/${rocket_Name}`;
             var path_1 = `../../7_Animation/${rocket_Name}`;
+            var path_2 = `/Data/7_Animation/${rocket_Name}`;
 
             // check which file path is valid, use the valid one and load the player
-            loadFileWithFallback(path_0, path_1, player);
+            loadFileWithFallback(path_0, path_1, path_2, player);
 
             // let the system know second anim is loaded
             second_Anim = true;
@@ -44,9 +45,10 @@ function complete_Check(second_Anim){
             // load back the first animation
             var path_0 = `../7_Animation/${aircraft_Name}`;
             var path_1 = `../../7_Animation/${aircraft_Name}`;
+            var path_2 = `Data/7_Animation/${aircraft_Name}`;
 
             // check which file path is valid, use the valid one and load the player
-            loadFileWithFallback(path_0, path_1, player);
+            loadFileWithFallback(path_0, path_1, path_2, player);
 
             // let the system know first anim is loaded
             second_Anim = false;
@@ -77,8 +79,10 @@ function complete_Check(second_Anim){
 /* ========================================================================== */
 function loadFileWithFallback(  primaryPath, 
                                 fallbackPath,
+                                path_2,
                                 player) {
 
+
     // gets two paths --> check which one is valid. Use the valid one to load the player
     fetch(primaryPath)
       .then((response) => {
@@ -105,9 +109,29 @@ function loadFileWithFallback(  primaryPath,
             } 
             
             else {
-              throw new Error('Both primary and fallback files not found');
+              // If both primary and fallback files not found, try path_2
+              return fetch(path_2).then((path2Response) => {
+                if (path2Response.ok) {
+
+                  console.log("returning: ", path_2);
+                  player.load(path_2);
+
+                }
+
+                else {
+                  throw new Error('Primary, fallback, and path_2 files not found');
+                }
+
+              });
             }
+
+
           });
+
+
+
+
+
         }
       })
 

_quarto.yml

@@ -86,7 +86,7 @@ book:
 cluster-based network modeling"
   subtitle: "Master thesis at the Technical University Braunschweig - Germany \n\n Field of study: aerospace engineering"
   author: "Javed Arshad Butt"
-  date: "5.3.2023"
+  date: "05.08.2023"
   page-navigation: true