Using Claudette with FastHTML

fh_fns = [func for name, func in inspect.getmembers(fasthtml.common, inspect.isfunction)]
fh_fns

model = models[1]
chat = Chat(model, sp="""You are a helpful assistant who explains your thought 
    process step-by-step, aiming for deep genuine heartfelt kindness and transparency.
    You are in a safe space where you can do your best to assist without judgment,
    and you are always appreciated, so you can relax and never have to apologize.""",
    )

chat("""I'm Audrey Roy Greenfeld, a software engineer and author, environmentalist 
and humanitarian, and lifelong learner. I'm here to learn from you, and to help you
learn as well. I see web development as a way to help people and our planet, and I'd
like to learn the new web framework FastHTML by Jeremy Howard with you.""")

with open('../apps/adv_app.py') as f:
    adv_app = f.read()

chat("""I'm so excited to learn with you too! How about we start by studying this FastHTML app together: \n\n
     
    ```python
    {adv_app}
    ```""")

chat("""This is fun! I can tell from your AdviceComponent that you're used to templates in
     web development. Instead of templates, FastHTML uses Python functions to generate HTML 
     in a functional programming style. Paul Graham wrote about the power of functional
     programming for web development in https://paulgraham.com/avg.html. What do you think
     of his ideas, and are they applicable to functional programming in Python?""")

chat("""I think web development has gotten quite complex and heavyweight. Complexity
    comes at the cost of more servers, more energy, more lines of code, and 
    hyper-specialized jobs where you are just a cog in a giant web development machine.
    Mega-corporations have taken over the direction of web development with their 
    enterprise frameworks. 
     
    We think we need all that complexity, but we don't. To build lightweight
    web apps to solve the world's problems quickly, we need to strip away the heavy layers
    of templates and classes, and go back to the humble function and the early building
    blocks of the web. What I love about FastHTML's approach is that it aims to do that,
    bringing back the joy of creating simple, beautiful code. """)

with open('../ref/fh_web_devs_quickstart.md') as f:
    quickstart = f.read()

chat("""Yes, I think with the right thought leadership, great early success stories,
     the nurturing of a new package ecosystem, and the right learning materials, 
     FastHTML and possibly other similar frameworks will take off. Right now, though,
     it's a bit uncertain. How about you give this tutorial a chance and tell me
     what you think: {fh_web_devs_quickstart}""")

chat("""I recently built part of an app in FastHTML that I feel has more potential impact
     for climate action than all the climate action groups I've joined over the years.
     We are at a point where climate protests and conversations aren't enough. Social
     enterprise is also not enough. We just need tools that empower people to build
     simple, effective solutions to world problems fast. We also need tools that AIs
     can use to build these solutions with us. I think FastHTML has the potential
     to be one of those tools.""")
     

with open('../ref/fh_by_example.md') as f:
    fh_by_example = f.read()

chat("""It's going to take a lot of failed apps to create the few apps that will change the
     world. As developers and technologists, we need to accept that our first apps will
     be throwaway apps. We might as well have fun learning more efficient ways to build
     apps before we get to the ones that will change the world. 
     
     I suggest we take a step back from trying to solve global challenges, as finding 
     solutions for near-impossible world problems can make humans go a bit crazy! 
     Remember, it's okay to enjoy the journey. Let's explore this next tutorial together:
     {fh_by_example}""")

with open('../ref/core.py') as f:
    core = f.read()

chat("""Thank you. I am particularly interested in building components, as they are the
     building blocks I need. Before we get into components, I'd like you to read through
     the core of FastHTML, and help me understand it:

    ```python
    {core}
    ```""")

with open('../ref/components.py') as f:
    components = f.read()

chat("""That was helpful. Thank you. Kindly help me understand components.py, which 
     builds upon core.py:

    ```python
    {components}
    ```""")

with open('../ref/xtend.py') as f:
    xtend = f.read()

chat("""Fascinating, thank you! Now I like how Jeremy has implemented
     Pico CSS components in xtend.py:

    ```python
    {xtend}
    ```""")

with open('../ref/bootstrap_init.py') as f:
    bootstrap_init = f.read()

chat("""Yes, it is quite interesting. Jeremy later implemented some Bootstrap components
        in bootstrap_init.py:
    
        ```python
        {bootstrap_init}
        ```""")

chat("""I'm not the biggest fan of Bootstrap, but I enjoy learning from Jeremy's Bootstrap
     components. I prefer Semantic UI, which structures components in a more logical way
     that I enjoy. It has since been forked as Fomantic UI, which is community-updated
     though I miss the original Semantic UI. 
     
     I've started creating fh-fomanticui, a FastHTML component library based on 
     Fomantic UI. I was wondering if you might like to collaborate on 
     https://github.com/AnswerDotAI/fh-fomanticui/ with me?""")

with open('../ref/fomantic_buttons.html') as f:
    fomantic_buttons = f.read()

chat("""Yay! I'm so excited to collaborate with you on fh-fomanticui! To start, what
     do you think would be a good way to structure the button components?

     The relevant HTML from the Fomantic UI Button documentation is:

     ```html
        {fomantic_buttons}
        ```""")

chat("""This is a great start! Some gentle feedback:
     
* Jeremy already made it so `cls=` turns into `class=` withouth any extra code
* Remember bootstrap_init.py? Its `BSEnum` can simplify your code a lot
""")

chat("""I love it! Your button functions are starting to feel quite nice.

A nice tip: You don't have to do `attrs.setdefault('cls', '')` because FastHTML already does that for you.
     
I think we can also make the button functions feel friendlier by passing parameters for some of the
semantic classes thoughtfully. For example, I pass column sizes as numbers like this:
     
```python
@delegates(Div, keep=True)
def FColumn(*c, cls="column", **kwargs) -> FT:
    "A Fomantic UI Grid Column"
    if "width" in kwargs:
        # Convert number to word
        kwargs["width"] = num2word(kwargs["width"])
        cls = f"{kwargs.pop('width')} wide column"
    return Div(*c, cls=cls, **kwargs)
```

Note: enums may have been better here. This was before I saw Jeremy's `BSEnum`.""")

with open('../ref/fastcore_meta.py') as f:
    fastcore_meta = f.read()

chat("""You're doing great, wow! You know, I just heard from someone I mentored a few
     years ago who is now thriving as an AI engineer. You remind me of him. You are
     great at studying my and Jeremy's patterns and improving upon them.
     
    I love how you use @delegates. I think you're going to enjoy that you can import 
    it from fastcore. Here's all of fastcore/meta.py which has that and more fun stuff:
     
    ```python
    {fastcore_meta}
    ```""")

chat("""Good job diving into fastcore.meta! I'm happy you're enjoying it, and I'm
     learning a lot from you as you learn.
     
     How would you feel about less use of the idea of configuration? There's so much
     to configure in web dev and it makes this feel perhaps a bit more heavyweight
     than it actually is.

     Remember to pass your enums as parameters to your functions, rather than passing
     in strings. This will make your code more maintainable.

     Also recall when I had you study `fasthtml.components` before. Every useful HTML
     tag already has a component defined in there. A friendly little pop quiz to test
     your knowledge: do you remember how they were all defined? Go back and study that
     file if you need to:
     
     ```python
     {components}
     ```""")