{"id":1518,"date":"2017-03-27T15:53:57","date_gmt":"2017-03-27T15:53:57","guid":{"rendered":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/?page_id=1518"},"modified":"2017-04-11T13:53:51","modified_gmt":"2017-04-11T13:53:51","slug":"the-color-sequence-web-application","status":"publish","type":"page","link":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-5-developing-web-applications-for-bioinformatics\/the-color-sequence-web-application\/","title":{"rendered":"5-1: The color sequence web application"},"content":{"rendered":"

In this section we will build a web application able to color amino-acids in a protein sequence according to their nonpolar, polar, basic or acidic nature (see figure 4-7-2<\/a>). The application will provide some simple statistics on the protein sequence composition in regard to those classes of amino-acids. These data will be represented graphically by building an HTML based graph.<\/p>\n

The web form will be very simple, with just a text-area for the sequence field and a submit button.<\/p>\n

\"\"
The web form for the color sequence script with a sample sequence<\/a> in the text-area<\/figcaption><\/figure>\n

The PHP code to handle the sequence for amino-acids classification will be based on the amino-acids classification script we saw in section 4-7<\/a>.<\/p>\n

The script will support sequences in FASTA format. To handle FASTA sequences we will use the process_fasta() function<\/a> that we wrote in section 4-12.<\/p>\n

This is what the output of the script will look like:<\/p>\n

\"The
The output of the color sequence script<\/figcaption><\/figure>\n

Coloring amino-acids<\/h2>\n

In order to color amino-acids in the script output we embed each amino-acid letter in a span tag with the appropriate class “nonpolar”, “polar”, “basic” or “acidic”:<\/p>\n

\r\nD<\/span>\r\n<\/code><\/pre>\n
In the stylesheet we assign a color to the class:<\/p>\n
\r\n.acidic{\r\n    color:tomato;\r\n}\r\n<\/code><\/pre>\n
Counting amino-acids<\/h2>\n
To count the amino-acids in each class we define four counters, one for each class, before we start cycling through the amino-acids array. We also use an $i counter to count the total number of residues and keep track of where we stand during the cycle. $i starts at 1 while the “classes counters” start at 0.<\/p>\n
\r\n$i = 1; \/\/ to keep track of the amino-acid number in the cycle\r\n$num_nonpolar = 0; \/\/ Number of nonpolar residues\r\n$num_polar = 0; \/\/ Number of polar residues\r\n$num_basic = 0; \/\/ Number of basic residues\r\n$num_acidic = 0; \/\/ Number of acidic residues\r\n$num_undef = 0; \/\/ Number of undefined residues\r\n<\/code><\/pre>\n
Each time we find an amino-acid belonging to a particular class during the foreach cycle that iterates through the amino-acids array, the respective counter is incremented by one:<\/p>\n
\r\n    if(strrchr($nonpolar, $aminoacid)){\r\n        .....\r\n        $num_nonpolar++;\r\n    }\r\n<\/code><\/pre>\n
Once we have the total number of amino-acids and the number for each class, we can calculate percentages:<\/p>\n
\r\n$percent_nonpolar = round(($num_nonpolar*100)\/$i, 2);\r\n<\/code><\/pre>\n
We limit the digits of the float number resulting from the division in the calculation by using the PHP round() function<\/a><\/strong>, that as the name implies, can round the float to a defined number of digits. The round() function takes the float as first argument and the number of desired digits as second argument. If no second argument is provided, the default of zero digits is used (the float is rounded to an integer).<\/p>\n
Building a graph in HTML<\/h2>\n
To build a graph in HTML we use a description list, the dl tag.<\/p>\n
The general syntax of a description list is as follows. In this example we have a description list with 3 items (Item 1, Item 2, Item 3) and their respective descriptions (Description 1, Description 2, Description 3):<\/p>\n
\r\n
\r\n
Item 1<\/dt>\r\n
Description 1<\/dd>\r\n
Item 2<\/dt>\r\n
Description 2<\/dd>\r\n
Item 3<\/dt>\r\n
Description 3<\/dd>\r\n<\/dl>\r\n<\/code><\/pre>\n
This code as it is will yield the following (what you see below may be influenced by this website’s style sheet, try it on a page yourself):<\/p>\n
\n
Item 1<\/dt>\n
Description 1<\/dd>\n
Item 2<\/dt>\n
Description 2<\/dd>\n
Item 3<\/dt>\n
Description 3<\/dd>\n<\/dl>\n
In our graph, the items are the names of the amino-acids classes, that are set to float:left in the CSS, and the descriptions contain divs. The script sets the width attribute of each div as the percentage of amino-acids in the corresponding class. The background-color attribute of each div is set to the same color we have selected for the amino-acids class by assigning to the div a “bar-nonpolar”, “bar-polar”, “bar-basic” or “bar-acidic” class, check out the CSS stylesheet below.<\/p>\n
This is an example of the resulting markup with a sample sequence. Again, mind that for the graph to look like the graph we get by running the script, CSS definitions for the various elements (dl, dd, dt and the bar classes assigned to the divs) are essential:<\/p>\n
\r\n
\r\n
Nonpolar<\/dt>\r\n
45.34%<\/div><\/dd>\r\n
Polar<\/dt>\r\n
27.33%<\/div><\/dd>\r\n
Basic<\/dt>\r\n
14.57%<\/div><\/dd>\r\n
Acidic<\/dt>\r\n
12.55%<\/div><\/dd>\r\n<\/dl>\r\n<\/code><\/pre>\n
The script code<\/h2>\n
As for all the web applications in this book, the code for this application will be distributed across several files. The files structure will be similar to the one used for the code in the previous section<\/a>, with the addition of an include folder containing a functions.php file where the process_fasta() function will be stored.<\/p>\n
color_sequence<\/strong>
\n    index.php
\n    script.php
\n    html<\/strong>
\n        header.html
\n        footer.html
\n    css<\/strong>
\n        style.css
\n    include<\/strong>
\n        functions.php<\/p>\n
header.html<\/p>\n
\r\n\r\n\r\n    \r\n        \r\n        A script to color a protein sequence<\/title>\r\n        <link rel=\"stylesheet\" href=\"css\/style.css\" type=\"text\/css\">\r\n    <\/head>\r\n    <body>\r\n        <div id=\"main-contents\">\r\n            <h1>Color amino-acids in a protein sequence according to their nonpolar, polar, basic or acidic nature<\/h1>\r\n<\/code><\/pre>\n<p>footer.html<\/p>\n<pre lang=\"html\"><code>\r\n        <\/div>\r\n        <footer>\r\n            Contact us at webmaster@mywebsite.com\r\n        <\/footer>\r\n    <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n<p>index.php<\/p>\n<pre lang=\"html\"><code>\r\n        <?php echo file_get_contents(\"html\/header.html\"); ?>\r\n        <form action=\"script.php\" method=\"POST\" enctype=\"multipart\/form-data\" id=\"revcomp_form\">\r\n            <fieldset id=\"data\">\r\n                <legend>Data<\/legend>\r\n                <p>\r\n                    <label for=\"fasta_sequence\">Your input sequence - FASTA format supported<\/label><br>\r\n                    <textarea name=\"fasta_sequence\" id=\"fasta_sequence\"><\/textarea>\r\n                <\/p>\r\n            <\/fieldset>\r\n            <input type=\"submit\" value=\"Color Sequence\">\r\n        <\/form>\r\n        <?php echo file_get_contents(\"html\/footer.html\"); ?>\r\n<\/code><\/pre>\n<p>In the CSS file, with respect to the example in the <a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-5-developing-web-applications-for-bioinformatics\/\">previous section<\/a>, we add four classes (nonpolar, polar, basic, acidic) for the four types of amino-acids and assign a different color to each class. We add an “undefined” class, for unexpected characters in the sequence, and a “sequence” class with font-family:courier that we will apply to the whole output sequence. We also add some styles for the <a href=\"https:\/\/www.w3schools.com\/TAGS\/tag_dl.asp\" target=\"_blank\">description list<\/a> elements (dl, dt and dd) and the divs (“bar” classes) used to generate the graph. <\/p>\n<p>For more advanced graph generation with description list tags and CSS check out <a href=\"http:\/\/www.htmlgoodies.com\/html5\/tutorials\/bar-graph-with-css3-and-progressive-enhancement.html\" target=\"_blank\">this tutorial on htmlgoodies.com<\/a>.<\/p>\n<p>For an uber-cool dynamic graph generated with javascript and the HTML5 canvas element, check out <a href=\"http:\/\/www.williammalone.com\/articles\/html5-canvas-javascript-bar-graph\/\" target=\"_blank\">this page on the williammalone.com web site<\/a>.<\/p>\n<p>style.css<\/p>\n<pre lang=\"css\"><code>\r\nbody{\r\n    width: 800px;\r\n    margin-right:auto;\r\n    margin-left:auto;\r\n}\r\n\r\n#main-contents{\r\n    border:4px solid tomato;\r\n    margin-right:auto;\r\n    margin-left:auto;\r\n    margin-bottom: 20px;\r\n    padding:20px;\r\n    padding-top:0;\r\n}\r\n\r\n.bar {\r\n    margin-bottom: 10px;\r\n    color: #fff;\r\n    padding: 4px;\r\n    text-align: center;\r\n}\r\n\r\ndl{\r\n    width:700px;\r\n}\r\n\r\ndt{ \r\n    float: left; \r\n    padding: 4px;\r\n    font-weight:bold;\r\n    \r\n}\r\n\r\ndd{\r\n    margin-left:80px;\r\n}\r\n\r\nspan.sequence{\r\n    font-family:courier;\r\n    font-size:14px;\r\n}\r\n\r\nspan.header{\r\n    font-size:14px;\r\n}\r\n\r\n.nonpolar{\r\n    color:SteelBlue;\r\n}\r\n\r\n.bar-nonpolar{\r\n    background-color:SteelBlue;\r\n}\r\n\r\n.polar{\r\n    color:tan;\r\n}\r\n\r\n.bar-polar{\r\n    background-color:tan;\r\n}\r\n\r\n.basic{\r\n    color:violet;\r\n}\r\n\r\n.bar-basic{\r\n    background-color:violet;\r\n}\r\n\r\n.acidic{\r\n    color:tomato;\r\n}\r\n\r\n.bar-acidic{\r\n    background-color:tomato;\r\n}\r\n\r\nspan.undefined{\r\n    color:darkgrey;\r\n}\r\n\r\nlabel{\r\n    cursor:pointer;\r\n    font-weight:bold;\r\n    color:teal;\r\n}\r\n\r\nlabel.radio{\r\n    font-weight:normal;\r\n}\r\n\r\nspan.field-title{\r\n    font-weight:bold;\r\n    color:teal;    \r\n}\r\n\r\nfieldset{\r\n    border:1px solid tomato;\r\n    margin-bottom:20px;    \r\n}\r\n\r\nlegend{\r\n    font-weight:bold;\r\n    color:tomato;\r\n}\r\n\r\ninput[type=submit] {\r\n    background-color: tomato;\r\n    border: none;\r\n    color: white;\r\n    padding: 5px 10px;\r\n    text-decoration: none;\r\n    margin: 4px 2px;\r\n    cursor: pointer;\r\n    text-transform: uppercase;\r\n    font-weight:bold;\r\n}\r\n\r\nh1{\r\n    color:tomato;\r\n}\r\n\r\ntextarea{\r\n    width:500px;\r\n    height:200px;\r\n    font-family:courier;\r\n    background:whitesmoke;  \r\n}\r\n\r\ninput[type=\"text\"]{\r\n    background:whitesmoke; \r\n}\r\n\r\nfooter{\r\n    text-align:center;\r\n}\r\n<\/code><\/pre>\n<p>functions.php<\/p>\n<pre lang=\"php\"><code>\r\n<?php\r\nfunction process_fasta($fasta_sequence, $mode=\"all\"){\r\n    $fasta_lines = explode(\"\\n\", $fasta_sequence);\r\n    $header = \"> Generic\"; \/\/ We will store the header line here during the next foreach cycle\r\n    $sequence = \"\"; \/\/ We will store the sequence here during the next foreach cycle\r\n    foreach($fasta_lines as $line){\r\n        \/\/ We strip possible whitespace (or other characters) from the beginning and end of the line\r\n        $line = trim($line);\r\n        if(preg_match(\"\/^>\/\", $line)){  \/\/ If the line starts with a > it's the header line\r\n            $header = $line;\r\n        }\r\n        elseif($line != \"\"){\r\n            $sequence = $sequence.$line; \/\/ We concatenate each new sequence line in the $sequence variable\r\n        }\r\n    }\r\n    \r\n    \/\/ At this point we should have the FASTA header in the $header variable \r\n    \/\/ and the whole sequence in the $sequence variable\r\n\r\n    \/\/ And now the return part, that depends on value of $mode\r\n    if($mode == \"all\"){\r\n        return array($header, $sequence);\r\n    }\r\n    elseif($mode == \"seq\"){\r\n        return $sequence;\r\n    }\r\n    elseif($mode == \"header\"){\r\n        return $header;\r\n    }\r\n    else{\r\n        return \"WARNING: process_fasta mode not supported\";\r\n    }\r\n}\r\n?>\r\n<\/code><\/pre>\n<p>script.php<\/p>\n<pre lang=\"php\"><code>\r\n<?php\r\ninclude(\"include\/functions.php\"); \/\/ We include the functions.php file\r\n$fasta_sequence = $_POST[\"fasta_sequence\"]; \/\/ and grab the sequence submitted by the user through the web form\r\n\/\/ We call it fasta_sequence rather than sequence as it may well be a FASTA sequence. The name of the\r\n\/\/ field in the web form (index.php) was also changed accordingly\r\n \r\n$sequence = strtoupper(process_fasta($fasta_sequence, \"seq\")); \/\/ We use process_fasta() to extract the \"raw\" sequence \r\n\/\/ from the fasta_sequence and also make sure it is in uppercase characters\r\n$header = process_fasta($fasta_sequence, \"header\"); \/\/ We use process_fasta() to extract the header\r\n \r\n$aminoacids = str_split($sequence, 1); \/\/ Generating an array with the amino-acids as elements\r\n \r\n$out_sequence = \"<span class=\\\"sequence\\\">\"; \/\/ This string will contain the colored sequence to output to the web page\r\n\/\/ For now it only contains the opening span tag for the sequence with a class \"sequence\" that has\r\n\/\/ a font-family:courier as defined in the style.css file\r\n \r\n$unexpected_chars = array(); \/\/ In case we find some unexpected character in the sequence, we will store it here to keep track\r\n \r\n\/\/ We define four strings containing the different classes of amino-acids\r\n$nonpolar =\"FLIMVPAWG\"; \/\/ A string made by all the nonpolar amino-acids in single letter notation\r\n$polar = \"STYCQN\"; \/\/ Polar amino-acids\r\n$basic = \"HKR\"; \/\/ Basic amino-acids\r\n$acidic = \"DE\"; \/\/ Acidic amino-acids\r\n \r\n\/\/ We now iterate through the amino-acids in the input sequence (the $aminoacids array)\r\n\/\/ For each amino-acid, we check if it is nonpolar, polar, basic or acidic\r\n\/\/ and wrap it in a span tag with the correct class. This, together with the CSS declarations in the style.css file,\r\n\/\/ will color the amino-acid in the output web page\r\n\/\/ Every 80 amino-acids we add a break tag, to respect the FASTA format\r\n \r\n$i = 1; \/\/ to keep track of the amino-acid number in the cycle\r\n$num_nonpolar = 0; \/\/ Number of nonpolar residues\r\n$num_polar = 0; \/\/ Number of polar residues\r\n$num_basic = 0; \/\/ Number of basic residues\r\n$num_acidic = 0; \/\/ Number of acidic residues\r\n$num_undef = 0; \/\/ Number of undefined residues\r\n\r\n \r\nforeach($aminoacids as $aminoacid){\r\n    if(strrchr($nonpolar, $aminoacid)){\r\n        $out_sequence = $out_sequence.\"<span class=\\\"nonpolar\\\">$aminoacid<\/span>\";\r\n        $num_nonpolar++;\r\n    }\r\n    elseif(strrchr($polar, $aminoacid)){\r\n        $out_sequence = $out_sequence.\"<span class=\\\"polar\\\">$aminoacid<\/span>\";\r\n        $num_polar++;\r\n    }\r\n    elseif(strrchr($basic, $aminoacid)){\r\n        $out_sequence = $out_sequence.\"<span class=\\\"basic\\\">$aminoacid<\/span>\";\r\n        $num_basic++;\r\n    }\r\n    elseif(strrchr($acidic, $aminoacid)){\r\n        $out_sequence = $out_sequence.\"<span class=\\\"acidic\\\">$aminoacid<\/span>\";\r\n        $num_acidic++;\r\n    }\r\n    else{\r\n        \/\/ We leave the possibility open to encounter an unknown character we have not classified\r\n        $out_sequence = $out_sequence.\"<span class=\\\"undefined\\\">$aminoacid<\/span>\";\r\n        $num_undef++;\r\n        $unexpected_chars[] = array($aminoacid, $i);\r\n    }\r\n    if(is_int($i\/80)){ \/\/ Every 80 amino-acids we add a break (and a newline to make the source code of the web page more readable)\r\n         $out_sequence = $out_sequence.\"<br>\\n\";\r\n    }\r\n    $i++;\r\n}\r\n \r\n$out_sequence = $out_sequence.\"<\/span>\\n\"; \/\/ We close the sequence span tag\r\n\r\n\r\n\/\/ Calculating percentages\r\n\/\/ The round() function rounds a float (first argument) to the number of decimals we specify as second argument\r\n$percent_nonpolar = round(($num_nonpolar*100)\/$i, 2);\r\n$percent_polar = round(($num_polar*100)\/$i, 2);\r\n$percent_basic = round(($num_basic*100)\/$i, 2);\r\n$percent_acidic = round(($num_acidic*100)\/$i, 2);\r\n \r\n\/\/ Providing an output to the user\r\n\/\/ We embed the output data within the same header and footer HTML code used in the web form\r\n\/\/ to ensure a consistent navigation experience and provide the feel that\r\n\/\/ everything takes place \"in the same website\"\r\n \r\necho file_get_contents(\"html\/header.html\"); \/\/ Writing the header HTML to the output page\r\n \r\necho \"<h2>Here is the colored sequence<\/h2>\\n\";\r\necho \"<p><span class=\\\"header\\\">$header<\/span><br>\\n\";\r\necho \"$out_sequence<\/p>\\n\";\r\necho \"<p><strong>Color Legend: <span class=\\\"nonpolar\\\">Nonpolar<\/span>, <span class=\\\"polar\\\">Polar<\/span>, <span class=\\\"basic\\\">Basic<\/span>, <span class=\\\"acidic\\\">Acidic<\/span><\/strong>\";\r\necho \"<h2>Sequence stats<\/h2>\";\r\necho \"<p><strong>Total residues: <\/strong>$i<\/p>\";\r\necho \"<p><strong>Total <span class=\\\"nonpolar\\\">Nonpolar<\/span>: <\/strong>$num_nonpolar ($percent_nonpolar%)<\/p>\";\r\necho \"<p><strong>Total <span class=\\\"polar\\\">Polar<\/span>: <\/strong>$num_polar ($percent_polar%)<\/p>\";\r\necho \"<p><strong>Total <span class=\\\"basic\\\">Basic<\/span>: <\/strong>$num_basic ($percent_basic%)<\/p>\";\r\necho \"<p><strong>Total <span class=\\\"acidic\\\">Acidic<\/span>: <\/strong>$num_acidic ($percent_acidic%)<\/p>\";\r\n\r\n\/\/ We generate a graph by using a description list dl tag\r\n\/\/ with div elements in the dd tags\r\n\/\/ To get a nice graph from this markup the CSS is very important,\r\n\/\/ check out the CSS definitions for dl, dd, dt  and the bar classes in the style.css file above\r\necho \"<h2>Graph<\/h2>\";\r\necho \"<p><dl>\r\n<dt>Nonpolar<\/dt>\r\n<dd><div class=\\\"bar bar-nonpolar\\\" style=\\\"width:$percent_nonpolar%\\\">$percent_nonpolar%<\/div><\/dd>\r\n<dt>Polar<\/dt>\r\n<dd><div class=\\\"bar bar-polar\\\" style=\\\"width:$percent_polar%\\\">$percent_polar%<\/div><\/dd>\r\n<dt>Basic<\/dt>\r\n<dd><div class=\\\"bar bar-basic\\\" style=\\\"width:$percent_basic%\\\">$percent_basic%<\/div><\/dd>\r\n<dt>Acidic<\/dt>\r\n<dd><div class=\\\"bar bar-acidic\\\" style=\\\"width:$percent_acidic%\\\">$percent_acidic%<\/div><\/dd>\r\n<\/dl><\/p>\";\r\n\r\nif($num_undef != 0){ \/\/ If we have any unexpected character\r\n    echo \"<p><strong>The following $num_undef unexpected characters were found:<\/strong><br>\\n\";\r\n    foreach($unexpected_chars as $char_arr){\r\n        $char = $char_arr[0];\r\n        $pos = $char_arr[1];\r\n        echo \"$char...$pos<br>\\n\";\r\n    }\r\n    echo \"<\/p>\";\r\n}\r\n \r\necho file_get_contents(\"html\/footer.html\"); \/\/ Writing the footer HTML to the output page\r\n?>\r\n<\/code><\/pre>\n<p>You may <a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/uploads\/color_sequence\/\" target=\"_blank\">test the script live here<\/a>.<\/p>\n<div class=\"google-ad\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- bioinfo web dev 2 --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: inline-block; width: 728px; height: 90px;\" data-ad-client=\"ca-pub-0159360445983090\" data-ad-slot=\"3442176918\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n<h2>Chapter Sections<\/h2>\n<p>[pagelist include=”1461″]<\/p>\n<p>[siblings]<\/p>\n<p>WORK IN PROGRESS ON CHAPTER 5!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this section we will build a web application able to color amino-acids in a protein sequence according to their nonpolar, polar, basic or acidic nature (see figure 4-7-2). The application will provide some simple statistics on the protein sequence composition in regard to those classes of amino-acids. These data will be represented graphically by … <a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-5-developing-web-applications-for-bioinformatics\/the-color-sequence-web-application\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “5-1: The color sequence web application”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1461,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1518","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/1518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":70,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/1518\/revisions"}],"predecessor-version":[{"id":1753,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/1518\/revisions\/1753"}],"up":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/1461"}],"wp:attachment":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/media?parent=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}