reveal-md

<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
  <h3>Hands-on Approaches to Software, Robotics, and AI</h3>
  <h4>Exploring Experiments and Science in Action</h4>
  <div class="r-hstack justify-center">
    <div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
    <div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
    <div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
    <div data-id="box4" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
  </div>
  <div style="flex: 1; padding: 20px;">
	   
	</div>
  <footer  style="padding: 0px; font-size: 19px;">
	  <div style="display: flex; align-items: center; width:1024px; justify-content: center; gap: 0px;">
		  <p style="margin: 0;">Simon Haller-Seeber     <img alt="Creative Commons License" style="height:15px; margin-bottom:-3px; border-width:0"
       src="https://licensebuttons.net/l/by-sa/4.0/88x31.png" /> | Intelligent and Interactive Systems | Department of Computer Science</p>
      <img src="pics/uibk-logo.svg" style="height: 75px; width: auto; margin-bottom:5px"> 
    </div>
	</footer>
</section>

---

<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">

<div class="r-vstack" style="position: relative; top: 60px;">
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
        <img src="pics/tools.png" style="width: 140px; opacity: 0.85;">
      </div>
      <div style="width: 900px" data-auto-animate-delay="0.6">Essential Tools for Scientific Discovery: <br/> Software, Versioning, and Reproducibility</div>
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <div data-id="box2" data-auto-animate-delay="0.1" style="background: grey; width: 150px; height: 100px; margin: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
        <img src="pics/stair.png" style="width: 140px; opacity: 0.95;">
      </div>
      <div style="width: 900px" data-auto-animate-delay="0.7">STAIR Lab: Traffic Sign Recognition  Workshop</div>
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
        <img src="pics/sphero-ide.png" style="width: 140px; opacity: 0.85;">
      </div>
      <div style="width: 900px" data-auto-animate-delay="0.8">Sphero Bolt Robot IDE Development</div>
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <div data-id="box4" data-auto-animate-delay="0.3" style="background: lime; width: 150px; height: 100px; margin: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
        <img src="pics/ai-trans.png" style="width: 140px; opacity: 0.85;">
      </div>
      <div style="width: 900px" data-auto-animate-delay="0.9">AI-Powered Real-Time Transcription and Translation</div>
    </div>
  </div>
</section>

---

<div style="display: flex; position: relative; top: -50px; left: -15%; align-items: center; margin-bottom: 20px;">
  <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
    <img src="pics/tools.png" style="width: 140px; opacity: 0.85;">
  </div>
  <div style="width: 900px" data-auto-animate-delay="0">Essential Tools for Scientific Discovery: <br/> <span class="uibk-orange">Software</span>, Versioning, and Reproducibility</div>
</div>

<h5> Setup a proper environment </h5>

- from the OS up to your IDE

<br />
<h5> Writing Clean Code </h5>

- DRY – Don't repeat yourself
- KISS – Keep it simple
- Coding Standards/Conventions 
- Don't reinvent the wheel

</span>

---

<span style="display: block; height: 100vh;">
<div style="display: flex; position: relative; top: 0px; left: -15%; align-items: center; margin-bottom: 20px;">
  <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
    <img src="pics/tools.png" style="width: 140px; opacity: 0.85;">
  </div>
  <div style="width: 900px" data-auto-animate-delay="0">Essential Tools for Scientific Discovery: <br/> Software, <span class="uibk-orange">Versioning</span>, and Reproducibility</div>
</div>

### Why do we need VCS

</span>
<span class="fragment">

- Be able to track which version is the most recent.
  - Think e.g. on the back-and-forth copying of files...
- Have a record of what changed, how to undo it, who changed it, and possibly even why
- Have a single agreed-upon source of _truth_, for a more frictionless and less error prone collaboration

</span>

### Where do we need version control

</span>

- Software and Documentation
- Data
- Experiments

</span>

- There are many different VCS: [Comparison of VCS](https://en.wikipedia.org/wiki/Comparison_of_version-control_software)

</span>

</div>

---

<h4>Good commit messages:</h4>

[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)

```bash
<type>[optional scope]: short subject line / description

[optional body] Explain *What* and *Why* (not *How*).

[optional footer(s)]
```

</span>

<ul>
<li><span class="uibk-orange">[fix]</span>: fixes a bug (a PATCH in SemVer).</li>
<li><span class="uibk-orange">[feat]</span>: introduces a new feature (a MINOR in SemVer).</li>
<li><span class="uibk-orange">[BREAKING CHANGE]</span> or type/scope!: introduces a breaking API change</li>
<li>Other Tags: build, chore, ci, docs, style, refactor, perf, test</li>
<li>Example: <span class="uibk-orange">[feat] user/project#12 and #38</span> : Ref-Issue #12 in remote repo and locally #38</li>
</ul>

---

- <span class="uibk-orange">Pre-Commit</span>: enforce coding standards/conventions
- Safe Pushing
- Cherry Pick
- FetchContent: Automated dependency handling for CMake

```
pip install pre-commit
pre-commit sample-config > .pre-commit-config.yml
pre-commit install # initialize the git hook
```

- Adapt your `.pre-commit-config.yml` file.
  - [ruff](https://github.com/astral-sh/ruff)
  - [Blog Post on Pre-Commits](https://stackoverflow.com/collectives/articles/71270196/how-to-use-pre-commit-to-automatically-correct-commits-and-merge-requests-with-g)

---

- Pre-Commit: enforce coding standards/conventions
- <span class="uibk-orange">Safe Pushing</span>
- Cherry Pick
- FetchContent: Automated dependency handling for CMake

```bash
git push --force-with-lease
```

---

- Pre-Commit: enforce coding standards/conventions
- Safe Pushing
- <span class="uibk-orange">Cherry Pick</span>
- FetchContent: Automated dependency handling for CMake

```bash
git cherry-pick
git cherry-pick A
```

<div class="mermaid">
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
        'git1': '#FF8000',
        'git2': '#ACC23C',
        'git0': '#002459',
        'git3': '#666666',
        'gitBranchLabel0': '#ffffff',
        'gitBranchLabel1': '#ffffff',
        'gitBranchLabel2': '#ffffff',
        'gitBranchLabel3': '#ffffff'
  } } }%%
gitGraph
  commit id: "1"
  branch develop
  commit id:"A"
  checkout main
  commit id:"2"
  checkout develop
  commit id:"B"
  checkout main
  commit id:"3"
  cherry-pick id:"A"
  commit id:"4"
  checkout develop
  commit id:"C"
</div>
<ul><li> <span class="uibk-orange">Note:</span>  you can also add changes to a previous commit <span class="uibk-orange">git commit -a --fixup=HASH</span></li></li>

---

- Pre-Commit: enforce coding standards/conventions
- Safe Pushing
- Cherry Pick
- <span class="uibk-orange">FetchContent:</span> Automated dependency handling for CMake

```bash
include(FetchContent)
FetchContent_Declare(
  example-project
  GIT_REPOSITORY https://github.com/user/example-project
  GIT_TAG        f9421625e3c9a5a49bb69056f5cc5ff9817be4b2
)

FetchContent_MakeAvailable(example-project)
```

---

<span style="display: block; height: 100vh;">
<div style="display: flex; position: relative; top: 0px; left: -15%; align-items: center; margin-bottom: 20px;">
  <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
    <img src="pics/tools.png" style="width: 140px; opacity: 0.85;">
  </div>
  <div style="width: 900px" data-auto-animate-delay="0">Essential Tools for Scientific Discovery: <br/> Software, Versioning, and  <span class="uibk-orange"> Reproducibility </span></div>
</div>

Looking at the <span class="uibk-orange">projects</span>
- Managing environments 
- Minimal CI/CD Pipeline
- Docker and Docker Orchestration

</div>

<b><span class="uibk-orange">Not covered</span></b>

- Tools for data versioning
  - Example: `git lfs`
- Tools for experiment
  - Example: `guild`

</div>

.left {
      left: -10%;
			width: 45%;
    }

.right {
      right: 0px;
			float: right;
    }
  </style>

---

## STAIR Lab

- RoboCup Junior 2016 (only one team from Tyrol)
- Started ROSSINI / Corona
- Needed something we could also do remote
- Software Testing AI Lab

</aside>

---

<div style="position: relative; left: 10%; align-items: left; margin-bottom: 20px; width: 100%; text-align: left;">
<h5>Hardware</h5>

- Sphero RVR (Rover)
- Nvidia Jetson Nano
- Intel Realsense
- (LSS Lynxmotion 4-DoF Arm)
</div>

<span style="float:right; font-size:16px; position: absolute; display: block; top:50px; right:-100px; width:250px; z-index: -1;">
 <img alt="Sphero RVR" width="250px" src="pics/sphero.png"><br/> <a href="https://sphero.com">sphero.com</a>
 <img alt="Nvidia Jetson Nano" width="190px" src="pics/jetson-nano.png"><br/> <a href="https://nvidia.com">nvidia.com</a>
 <img alt="Intel Realsense" width="230px" src="pics/intel.png"><br/> <a href="https://intel.de">intel.de</a>
</span>

---

<h5>Workshop</h5>

- Design Traffic-Signs
- Train a Image Classification Network 
  with Teachable Machine
- Download the NN and Program the Robot
- Run in Simulation or on Real Robot

<h5>Software-Stack Challenge</h5>

- Ubuntu 18.04?!
</div>

---

<h5> Building Stable Environment </h5>

- <span class="uibk-orange">Conda Environment</span>: ROS using RoboStack
- Docker Image(s)

- Seamless integration of ROS with other software stacks.
- Simplified Installation + setup for ROS 1 and ROS 2.
- Cross-platform: Available for Linux, macOS, and Windows
- Environment Management: Easily create isolated environments for different ROS projects.

```bash
conda install mamba -c conda-forge
conda config --add channels robostack
conda config --env --add channels robostack-noetic
conda config --env --add channels robostack-jazzy
mamba install ros-noetic-desktop
mamba install ros-jazzy-desktop
```
</span>

</div>

---

<h5> Building Stable Environment </h5>

- Conda Environment: ROS using RoboStack
- <span class="uibk-orange">Docker</span> Image(s)

```yaml
FROM ros:noetic-ros-core-focal
RUN mkdir -p /root/.ssh/
RUN apt-get clean
RUN apt-get update && apt-get install -y \
    ssh git python3-pip python3-catkin-tools \
    ros-noetic-controller-manager 
		...
    ros-noetic-librealsense2 \
    ros-noetic-realsense2-description \
RUN pip3 install rospkg catkin_pkg scikit-image charset_normalizer
ENTRYPOINT ["bash"]
```
</span>

</div>

---

<span style="float:right; font-size:16px; position: absolute; display: block; top:150px; right:-150px; width:250px; z-index: -1;">
 <img alt="Sphero Bolt Pack" width="200px" src="pics/sphero-bolt.png"><br/>
 <img alt="Sphero Bolt Pack" width="200px" src="pics/sphero-bolt-pack.png"><br/> <a href="https://sphero.com">https://sphero.com</a>
</span>
 <span class="fragment">
 <span style="float:center; justify-content: center; align-items: center; font-size:16px; width:900px; position: relative; display: block; z-index: -1;">
   <img alt="Sphero Bolt Blocky IDE" widht="600px" src="pics/bolt-blockly.png">
  </span>
</span>

---

- Utilizing WASM
- Chromium based

---

<h5> Building a Python Wheel with Poetry </h5>

- <span class="uibk-orange">Poetry</span>: Python dependency management and packaging ( + pyproject.toml )
- Poetry uses `{cache-dir}/virtualenvs`. 
- Build the package (creates .whl and .tar.gz files in the dist/ folder)

```bash
poetry new projectname
poetry add pkg_name1 pkg_name2==version "pkgname_3<version"
poetry run python -m projectname.main
poetry shell
poetry build
```
<pre><code style="font-size: 14px; line-height: 1.1; ">
projectname
├── pyproject.toml
├── README.md
├── (src)/projectname
│         ├── __init__.py
│         └── main.py
└── tests
    └── __init__.py
</code></pre>

---

```html
  <script type="module">
    // Load Pyodide 
    import { loadPyodide } from "pyodide.mjs";
    async function main() {
      const pyodide = await loadPyodide();
      await pyodide.loadPackage("micropip");
      // Install your library (hosted wheel or source archive)
      await pyodide.runPythonAsync(`
        import micropip
        await micropip.install("your_package.whl")
        import your_package
        print(your_package.your_function())`);
		}
    main();
  </script>
```

---

- .gitlab-ci.yml
<pre><code style="font-size: 14px; line-height: 1.1; ">
image: node:22.6.0
node-build:
  stage: build
  script:
    - npm install
    - npm run build --prod
  artifacts:
    paths:
    - dist
  only:
    - main
publish:
  only:
    - main
  stage: deploy
  needs: [node-build]
  before_script:
   - apt-get update -qy && apt-get install -y rsync openssh-client
   - mkdir -p ~/.ssh
   - echo "${SSH_BKY_DEPLOY}" > ~/.ssh/id_rsa
   - chmod 700 ~/.ssh/id_rsa
   - ssh-add ~/.ssh/id_rsa
   - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
  script:
   - rsync -atv --delete --progress ./dist/ blockly@stair-lab.uibk.ac.at:/var/www/html/sphero-blockly
</code></pre>

---

- Keeping Data In-House
- Utilizing modern AI models including our own

---

<div class="code-corner python-snippet">
<pre><code class="language-python" style="font-size: 14px; line-height: 1.1;">
import redis
# Connect to Redis
r = redis.StrictRedis(host='redishost',port=6379,db=0)
# Publish a simple message
r.publish('my-channel', 'Hello to redis')
</code></pre></div>

<div class="code-corner yaml-snippet">
<pre><code  style="font-size: 14px; line-height: 1.1; ">
services:
  redishost:
    image: redis:alpine
    container_name: redis
    restart: unless-stopped
    volumes:
      - "./redis-data:/data"
    command: ["redis-server", "--appendonly", "yes"]
    healthcheck:
      test: [ "CMD", "redis-cli", "--raw", "incr", "ping" ]
    ports:
      - "6397:6379"
    networks:
      - web
networks:
  web:
    external: true
</code></pre></div>

.yaml-snippet {
      left: -5%;
			width: 60%;
			position: absolute;
			float: left;
    }

.python-snippet {
      right: 0px;
			width: 60%;
			position: absolute;
			float: right;
    }
  </style>
---

<div class="code-corner python-snippet">
<pre><code class="language-python" style="font-size: 14px; line-height: 1.1;">
import redis
from ollama import Client
# Initialize Redis client
redis-client = redis.StrictRedis(host='redishost', port=6379, db=0)
# Initialize Ollama client
client = Client(host='http://ollama:7869') 
# Subscribe to a Redis channel
pubsub = redis-client.pubsub()
pubsub.subscribe('my-channel')  # Replace with your actual channel
for message in pubsub.listen():
  if message['type'] == 'message':
    text = message['data']
    print("Received:", text)
    # Summarize using Ollama
    response = client.chat(
      model='openthinker',  # Replace with your model
      messages=[
        {'role': 'system', 'content': 'Summarize clearly and concisely:'},
        {'role': 'user', 'content': text}
      ],
      stream=False
    )
    summary = response['message']['content']
    print("\n--- Summary ---\n", summary, "\n")
</code></pre></div>

<div class="code-corner yaml-snippet">
<pre><code  style="font-size: 14px; line-height: 1.1;">
services:
 ollama:
  image: ollama/ollama:latest
  pull_policy: always
  container_name: ollama
  volumes:
   - /usr/share/ollama/.ollama:/root/.ollama
  tty: true
  restart: unless-stopped
  ports:
   - 7869:11434
  environment:
   - OLLAMA_KEEP_ALIVE=24h
  deploy:
   resources:
    reservations:
     devices:
      - driver: nvidia
        device_ids: ["0"]
        capabilities: [gpu]
</code></pre></div>

.yaml-snippet {
      left: -10%;
			width: 45%;
    }

.python-snippet {
      right: -100px;
			position: absolute;
			float: right;
    }
  </style>

---

<div class="r-vstack" style="position: absolute; top: 60px; left:100px;">
<h5>If you are interested in more</h5>

- MIT Course The Missing Semester (https://missing.csail.mit.edu/).
- Software Engineering at Google, by Titus Winters et.al. 03/2020 
- Pro Git, by Scott Chacon and Ben Straub. 2nd Edition 2014.
  - Online: https://git-scm.com/book/en/v2
  - Talk: So you think you know git?, FOSDEM 2024, Scott Chacon.
- Welches Problem loest Docker (https://engineeringkiosk.dev)
- Lecture: Software Management for Scientific Computing 
  - Online: https://iis.uibk.ac.at/public/simon/LV-198702.pdf

<p>Intelligent and Interactive Systems</p>

- https://iis.uibk.ac.at

</div>

</span>