mirror of
https://github.com/Aider-AI/aider.git
synced 2025-06-01 18:25:00 +00:00
54aa208171
# Aider chat conversation:
USER: but it's a 1060 wide by 1080 high video, not 16:9
ASSISTANT: You're right, the video dimensions are 1060x1080, which is not a 16:9 aspect ratio. To maintain the original aspect ratio of the video, we can calculate the padding-bottom percentage based on the video's height divided by its width. Here are the updated changes:
_posts/2024-05-02-browser.md
<source>
<<<<<<< SEARCH
<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>
=======
<style>
.video-container {
position: relative;
padding-bottom: 101.89%; /* 1080 / 1060 = 1.0189 */
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
>>>>>>> REPLACE
</source>
The change:
1. Update the `padding-bottom` value to `101.89%`, which is calculated by dividing the video's height (1080) by its width (1060) and multiplying by 100 to get a percentage.
This change will ensure that the responsive video container maintains the original aspect ratio of the 1060x1080 video.
51 lines
1.4 KiB
Markdown
51 lines
1.4 KiB
Markdown
---
|
|
title: AI pair programming in your browser
|
|
excerpt: Aider has an experimental browser UI, allowing you to collaborate with LLMs on code in your local git repo.
|
|
highlight_image: /assets/browser.jpg
|
|
---
|
|
# AI pair programming in your browser
|
|
|
|
<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: 101.89%; /* 1080 / 1060 = 1.0189 */
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-container video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
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](https://aider.chat/docs/faq.html#how-does-aider-use-git)
|
|
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](https://aider.chat/docs/llms.html).
|
|
|
|
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
|
|
```
|