<details open>
    <summary style="background-color: #CE6400; padding-left: 10px;">
        About
    </summary>
    <div style="display: flex; flex-direction: row; background-color: #D87F2B; padding-left: 10px;">
        <div style="flex: 1;">
            <p style="margin-top: 10px">
                This tab generates a circular trajectory through latent space that begins and ends with the same image. 
                If we specify a large number of steps around the circle, the successive images will be closely related, resulting in a gradual deformation that produces a nice animation.
            </p>
            <p style="font-weight: bold;">
                Additional Controls:
            </p>  
            <p style="font-weight: bold;">
                Number of Steps around the Circle:
            </p>
            <p>
                Specify the number of images to produce along the circular path.
            </p>
            <p style="font-weight: bold;">
                Proportion of Circle:
            </p>
            <p>
                Sets the proportion of the circle to cover during image generation. 
                Ranges from 0 to 360 degrees. 
                Using a high step count with a small number of degrees allows you to explore very subtle image transformations.
            </p>
        </div>
        <div style="flex: 1; align-content: center;">
            <img src="https://raw.githubusercontent.com/touretzkyds/DiffusionDemo/master/images/circular.png" style="max-width: 100%; height: auto; margin-top: 10px; margin-bottom: 10px; padding-left: 10px;">
        </div>
    </div>