Add image generation article

johnshaughnessy commented 10 months ago

This PR adds an article, "Image Generation Guide".

It also modifies the build.sh script so that new articles are generated with the same name as existing articles (index-content.html).

It also enables support for gifs in the webpack config.

It removes the call for contributions about image-models (since this is meant to be that contribution).

netlify[bot] commented 10 months ago

Deploy Preview for mozilla-ai-guide ready!

Name	Link
Latest commit	771fa8c7987f1f767980f76b68439d71f1f034bb
Latest deploy log	https://app.netlify.com/sites/mozilla-ai-guide/deploys/6595f84e1b0b0b0008023db2
Deploy Preview	https://deploy-preview-37--mozilla-ai-guide.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

skyfallsin commented 10 months ago

@johnshaughnessy can we patch up some of the styling - the rendered page looks odd. Dan can help

johnshaughnessy commented 10 months ago

@johnshaughnessy can we patch up some of the styling - the rendered page looks odd. Dan can help

Sure. I didn't added any css, so I'm guessing there are some styles added to the other pages that don't get picked up by the base template:

https://github.com/mozilla/ai-guide/blob/3b779129574e947e3f8ee6af133155910c08d077/templates/base-ai.html#L51-L53

Maybe these four inline stylesheets should be added to the base template?

./templates/content/choosing-ml-models/ai-guide-pick-a-model-test-a-model.html:7:<style type="text/css">
./templates/content/choosing-ml-models/ai-guide-pick-a-model-test-a-model.html:94:<style type="text/css">
./templates/content/choosing-ml-models/ai-guide-pick-a-model-test-a-model.html:6848:<style type="text/css">
./templates/content/choosing-ml-models/ai-guide-pick-a-model-test-a-model.html:7273:<style type="text/css">
./templates/content/choosing-ml-models/ai-guide-evaluate-ml-results.html:7:<style type="text/css">
./templates/content/choosing-ml-models/ai-guide-evaluate-ml-results.html:94:<style type="text/css">
./templates/content/choosing-ml-models/ai-guide-evaluate-ml-results.html:6848:<style type="text/css">
./templates/content/choosing-ml-models/ai-guide-evaluate-ml-results.html:7273:<style type="text/css">
./templates/content/comparing-open-llms/comparing-open-llms.html:7:<style type="text/css">
./templates/content/comparing-open-llms/comparing-open-llms.html:94:<style type="text/css">
./templates/content/comparing-open-llms/comparing-open-llms.html:6848:<style type="text/css">
./templates/content/comparing-open-llms/comparing-open-llms.html:7273:<style type="text/css">

johnshaughnessy commented 10 months ago

As I've been poking around, I think I figured out that the 4 additional inline stylesheets come from the ipynb -> html conversion process (nbconvert)

Example: https://github.com/mozilla/ai-guide/commit/93e5c43eb8dfa72d2546a6bff0ee2cc97a93468b#diff-ab61d65c3666803d258e942605930e314dd946ec56313c526f9eb276b6f5ac02R33

There are no ipynb's in my article, so those styles didn't get added. I suspect I can fix my article in any of these three ways:

adding an ipynb and building with tools/build_ai_guide.sh (rather than templates/content/build.sh, which is what I've been using) ,
manually include the 4 inline styles to the generated html or
add the 4 inline styles to the base template (so that every page gets it, whether they have ipynbs or not)

I'm not sure which way is simplest. I'll think about it as I'm trying them.

johnshaughnessy commented 10 months ago

Ok, I made two discoveries.

I was running into a problem with ./tools/build_ai_guide.sh where none of the headers were getting auto-generated ids. This is because recent versions of marked disable auto-generated ids for headers by default. I couldn't get marked to respect an alternative configuration file, so instead I updated ./tools/build_ai_guide.sh so that it installs marked@^6.0.0. More details are in the commit comment.
The four in-line stylesheets that I mentioned above were red-herrings. Adding these to my guide didn't do anything to change the styles. I noticed that my guide uses headings h1, h2, h3, and h4, whereas the other articles seem to favor h2 and h4. It turns out there were no rules setup for h1 and h3. This accounts for the visual difference. To fix this, I added basic style rules for h1 and h3.

This is ready for re-review @skyfallsin . If you notice any other oddities with the styles, please let me know what they are. It took me a while to notice what you might be referring to with your previous comment.

mozilla / ai-guide