<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
 Element
This is the base brick of branca. You can create an Element in providing a template string
Step1:  Each element has an attribute _name and a unique _id. You also have a method get_name to get a unique string representation of the element.
Step2:  You can render an Element using the method render
Step3:  In the template, you can use keyword this for accessing the object itself ; and the keyword kwargs for accessing any keyword argument provided in the render method
Step4:  Well, this is not really cool for now. What makes elements useful lies in the fact that you can create trees out of them. To do so, you can either use the method add_child or the method add_to.
Step5:  Now in the example above, embedding the one in the other does not change anything.
Step6:  But you can use the tree structure in the template.
Step7:  As you can see, the child of an element are referenced in the _children attibute in the form of an OrderedDict. You can choose the key of each child in specifying a name in the add_child (or add_to) method
Step8:  That way, it's possible to overwrite a child in specifying the same name
Step9:  I hope you start to find it useful.
In fact, the real interest of Element lies in the classes that inherit from it. The most important one is Figure described in the next section.
Figure
A Figure represents an HTML document. It's composed of 3 parts (attributes)
Step10:  You can for example create a beatiful cyan "hello-world" webpage in doing
Step11:  You can simply save the content of the Figure to a file, thanks to the save method
Step12:  If you want to visualize it in the notebook, you can let Figure._repr_html_ method do it's job in typing
Step13:  If this rendering is too large for you, you can force it's width and height
Step14:  Note that you can also define a Figure's size in a matplotlib way
Step15:  MacroElement
It happens you need to create elements that have multiple effects on a Figure. For this, you can use MacroElement whose template contains macros ; each macro writes something into the parent Figure's header, body and script.
Step16:  Link
To embed javascript and css links in the header, you can use these class
Step17:  Html
An Html element enables you to create custom div to put in the body of your page.
Step18:  It's designed to render the text as you gave it, so it won't work directly it you want to embed HTML code inside the div.
Step19:  For this, you have to set script=True and it will work
Step20:  IFrame
If you need to embed a full webpage (with separate javascript environment), you can use IFrame.
Step21:  As you can see, it will embed the full content of the iframe in a base64 string so that the ouput looks like
Step22:  Div
At last, you have the Div element that behaves almost like Html with a few differences
<ASSISTANT_TASK:>
Python Code:
e = Element("This is fancy text")
Explanation: Element
This is the base brick of branca. You can create an Element in providing a template string:
End of explanation
print(e._name, e._id)
print(e.get_name())
Explanation: Each element has an attribute _name and a unique _id. You also have a method get_name to get a unique string representation of the element.
End of explanation
e.render()
Explanation: You can render an Element using the method render:
End of explanation
e = Element("Hello {{kwargs['you']}}, my name is `{{this.get_name()}}`.")
e.render(you='World')
Explanation: In the template, you can use keyword this for accessing the object itself ; and the keyword kwargs for accessing any keyword argument provided in the render method:
End of explanation
child = Element('This is the child.')
parent = Element('This is the parent.').add_child(child)
parent = Element('This is the parent.')
child = Element('This is the child.').add_to(parent)
Explanation: Well, this is not really cool for now. What makes elements useful lies in the fact that you can create trees out of them. To do so, you can either use the method add_child or the method add_to.
End of explanation
print(parent.render(), child.render())
Explanation: Now in the example above, embedding the one in the other does not change anything.
End of explanation
parent = Element("<parent>{% for child in this._children.values() %}{{child.render()}}{% endfor %}</parent>")
Element('<child1/>').add_to(parent)
Element('<child2/>').add_to(parent)
parent.render()
Explanation: But you can use the tree structure in the template.
End of explanation
parent = Element("<parent>{% for child in this._children.values() %}{{child.render()}}{% endfor %}</parent>")
Element('<child1/>').add_to(parent, name='child_1')
parent._children
Explanation: As you can see, the child of an element are referenced in the _children attibute in the form of an OrderedDict. You can choose the key of each child in specifying a name in the add_child (or add_to) method:
End of explanation
Element('<child1_overwritten/>').add_to(parent, name='child_1')
parent.render()
Explanation: That way, it's possible to overwrite a child in specifying the same name:
End of explanation
f = Figure()
print(f.render())
Explanation: I hope you start to find it useful.
In fact, the real interest of Element lies in the classes that inherit from it. The most important one is Figure described in the next section.
Figure
A Figure represents an HTML document. It's composed of 3 parts (attributes):
header : corresponds to the &lt;head&gt; part of the HTML document,
html : corresponds to the &lt;body&gt; part,
script : corresponds to a &lt;script&gt; section that will be appended after the &lt;body&gt; section.
End of explanation
f.header.add_child(Element("<style>body {background-color: #00ffff}</style>"))
f.html.add_child(Element("<h1>Hello world</h1>"))
print(f.render())
Explanation: You can for example create a beatiful cyan "hello-world" webpage in doing:
End of explanation
f.save('foo.html')
print(open('foo.html').read())
Explanation: You can simply save the content of the Figure to a file, thanks to the save method:
End of explanation
f
Explanation: If you want to visualize it in the notebook, you can let Figure._repr_html_ method do it's job in typing:
End of explanation
f.width = 300
f.height = 200
f
Explanation: If this rendering is too large for you, you can force it's width and height:
End of explanation
Figure(figsize=(5,5))
Explanation: Note that you can also define a Figure's size in a matplotlib way:
End of explanation
macro = MacroElement()
macro._template = Template(
    '{% macro header(this, kwargs) %}'
    'This is header of {{this.get_name()}}'
    '{% endmacro %}'
    '{% macro html(this, kwargs) %}'
    'This is html of {{this.get_name()}}'
    '{% endmacro %}'
    '{% macro script(this, kwargs) %}'
    'This is script of {{this.get_name()}}'
    '{% endmacro %}'
    )
print(Figure().add_child(macro).render())
Explanation: MacroElement
It happens you need to create elements that have multiple effects on a Figure. For this, you can use MacroElement whose template contains macros ; each macro writes something into the parent Figure's header, body and script.
End of explanation
js_link = JavascriptLink('https://example.com/javascript.js')
js_link.render()
css_link = CssLink('https://example.com/style.css')
css_link.render()
Explanation: Link
To embed javascript and css links in the header, you can use these class:
End of explanation
html = Html('Hello world')
html.render()
Explanation: Html
An Html element enables you to create custom div to put in the body of your page.
End of explanation
Html('<b>Hello world</b>').render()
Explanation: It's designed to render the text as you gave it, so it won't work directly it you want to embed HTML code inside the div.
End of explanation
Html('<b>Hello world</b>', script=True).render()
Explanation: For this, you have to set script=True and it will work:
End of explanation
iframe = IFrame('Hello World')
iframe.render()
Explanation: IFrame
If you need to embed a full webpage (with separate javascript environment), you can use IFrame.
End of explanation
f = Figure(height=180)
f.html.add_child(Element("Before the frame"))
f.html.add_child(IFrame('In the frame', height='100px'))
f.html.add_child(Element("After the frame"))
f
Explanation: As you can see, it will embed the full content of the iframe in a base64 string so that the ouput looks like:
End of explanation
div = Div()
div.html.add_child(Element('Hello world'))
print(Figure().add_child(div).render())
Explanation: Div
At last, you have the Div element that behaves almost like Html with a few differences:
The style is put in the header, while Html's style is embedded inline.
Div inherits from MacroElement so that:
It cannot be rendered unless it's embedded in a Figure.
It is a useful object toinherit from when you create new classes.
End of explanation
<END_TASK>