dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-05-30 17:24:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3
aider/_posts/2024-05-02-browser.md
Paul Gauthier a372fff409 aider: Made the video responsive to prevent overflow on mobile devices. 
# Aider chat conversation:

USER: the video overflows the width of the browser on mobile

ASSISTANT: To fix the video overflowing the width of the browser on mobile devices, we can add some CSS styles to make the video responsive. Here are the changes:

_posts/2024-05-02-browser.md
<source>
<<<<<<< SEARCH
<video width="1060" height="1080" controls loop poster="/assets/browser.jpg">
  <source src="/assets/aider-browser-social.mp4" type="video/mp4">
  <a href="/assets/aider-browser-social.mp4">Aider browser UI demo video</a>
</video>
=======
<div class="video-container">
  <video controls loop poster="/assets/browser.jpg">
    <source src="/assets/aider-browser-social.mp4" type="video/mp4">
    <a href="/assets/aider-browser-social.mp4">Aider browser UI demo video</a>
  </video>
</div>

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
>>>>>>> REPLACE
</source>

The changes:

1. Wrap the `<video>` element inside a `<div>` with class `video-container`.
2. Remove the `width` and `height` attributes from the `<video>` element.
3. Add a `<style>` block with CSS for the `video-container` class:
   - Set `position: relative` on the container.
   - Use `padding-bottom: 56.25%` to maintain a 16:9 aspect ratio.
   - Set `height: 0` and `overflow: hidden` to contain the video.
4. Add CSS for the `video` element inside `video-container`:
   - Set `position: absolute` to position it within the container.
   - Set `top: 0`, `left: 0`, `width: 100%`, `height: 100%` to make it fill the container.

These changes will make the video responsive and fit within the width of the browser on mobile devices while maintaining its aspect ratio.
2024-05-02 18:02:10 -07:00

1.4 KiB
Raw Blame History

title excerpt highlight_image
AI pair programming in your browser Aider has an experimental browser UI, allowing you to collaborate with LLMs on code in your local git repo. /assets/browser.jpg

AI pair programming in your browser

Use aider's new experimental browser UI to collaborate with LLMs to edit code in your local git repo. Aider will directly edit the code in your local source files, and git commit the changes with sensible commit messages. You can start a new project or work with an existing git repo. Aider works well with GPT 3.5, GPT-4, GPT-4 Turbo with Vision, and Claude 3 Opus. It also supports connecting to almost any LLM.

Use the --browser switch to launch the browser version of aider:

pip install aider-chat

export OPENAI_API_KEY=<key> # Mac/Linux
setx   OPENAI_API_KEY <key> # Windows

aider --browser