Development, Deployment And Evaluation Of The Content Management System .

Transcription

Received March 22nd, 2021; Accepted July 5th, 2021Development, Deployment and Evaluation of the ContentManagement System Generating CG AnimationsAutomatically from Blog EntriesHayashi, MasakiUppsala Universityhayashim77@gmail.comBachelder, StevenUppsala Universitysteven.bachelder@gmail.comKanematsu, YoshihisaTokyo University of Technologykanematsuyh@stf.teu.ac.jpSasaki, KazuoTokyo University of Technologyksasaki@stf.teu.ac.jpTsuruta, NaoyaToyo Universitytsuruta@iniad.orgKondo, KunioTokyo University of Technologykondo@stf.teu.ac.jpAbstractThere is a wide variety of information on the Internet, and it is vital to organize and disseminate the information that peoplewant to know based on this information. Expressing the data in a way that people can easily understand is an importanttask for the media. We have developed a system that automatically converts WordPress blog entries into CG animations.By incorporating the required functionality into a WordPress theme, users can choose this theme and build a blog wherereaders can watch CG animations instead of reading blog entries. CG animation is created by TVML (TV Program MakingLanguage) technology that enables to create a TV program-like animation with CG characters with synthesized voices,image data display, sound playback, and superimposing, etc. In addition to contributing to the WordPress community, whichis expected to be an auxiliary function of blog services in particular. It may also function as a production tool for creatingvarious types of CG animation, not just blog support. In this research, we have developed a functioning software applicationworking on a PC and an Android hand-held device to visualize the blog entries. the WordPress is specifically used for ourpurpose as the blog system in this research. We successfully showed this in several exhibitions and also conducted a websurvey to evaluate the system. This paper describes the proposed system in detail and the evaluation test.Keywords: Blog, CG animation, TV production tool1IntroductionIn our system, it first fetches the HTML data of the blogentries from the Internet server, then processes it by usingweb scraping technique to extract necessary information (articletitle, text body, picture data, etc.) for the auto-generatingCG animations. The information is then visualized by usingTVML (TV program Making Language) technology [2] to outputthe TV-like CG animations with CG characters speaking withsynthesized voices and other necessary visual effects such assubtitles, superimposing, image file displays, background musicplayback, etc.There is a wide variety of information on the Internet, and it isvital to organize and disseminate the information that people wantto know based on this information. With the development of themedia, a large amount of data has been stored and it has come tobe called big data. Expressing the data in a way that people caneasily understand is an important task for the media.As part of digital journalism, we are advancing research anddevelopment to create CG animations from blog entries [1]automatically. With this technology, users can watch the blogentry in a TV-news manner instead of reading it. This approachmay have the potential to allow users to easily and comfortablyunderstand the blog contents. And also this could be beneficialto visually impaired people. The web browser has a feature thatautomatically reads the text out loud for visually impaired people.In our system, the text is spoken like TV news with subtitles tohelp even for hearing impaired people understand the content. Wethink there is a need to develop this visual representation systemof blog articles on the Internet that people with and withoutdisabilities could see the same contents together.We have developed a functioning software application workingon a PC and an Android hand-held device to visualize the blogentries. This time the WordPress is specifically used for ourpurpose as the blog system. We successfully showed this inseveral exhibitions and also conducted a web survey to evaluatethe system. This paper describes the system in detail and theevaluation test.59

Received March 22nd, 2021; Accepted July 5th, 20212Related WorkSome attempts have been made to acquire text information suchas websites already existing in large quantities on the Internet tomake CG animation automatically.2.1Automatic Generation of TV Show Animationsfrom Web SitesThe automatic generation of animation is one of the broad topicsin the field of computer graphics. There are many types ofexpressions in animation, but the automatic generation of storyanimation is another challenge. Story animation requires achronological storyline. It is still challenging to create a TV showlike animation by the novice user because it requires knowledgeof lighting, camera switching, and the studio set, etc. that areused in professional video production or a broadcasting station.To support the creation of it, the technology that enables to createa TV show like CG animation automatically from a text-baseddocument has been developed [1, 2]. Nadamoto and Tanaka triedto convert web content into various types of story animation usingTVML [3]. Nadamoto made a mechanism to define unique XMLtags to the HTML of the Website and automatically convert thecontent of the site into a TV program produced by CG.2.2Figure 1 Configuration of auto-generating CG animation fromblog entries33.1System of Making Animations from Blog EntriesFigure 1 shows the configuration of the CG animation autogeneration system. The system applies a Web scraping techniqueto the HTML of the blog entry to extract the title, the main text,and the image URLs. It then generates a TVML script based onthe obtained data and converts it into a TVML script. The TVMLengine then playback the obtained TVML script to visualize it toget the TV-program-like CG animation with computer graphicsand other techniques.Generating News, Talk-show, Dialog AnimationsIn professional broadcasting stations, there are many examplesof content produced by using CG announcers. An attemptwas made to specialize in news programs [4] by limiting thetarget news websites and automatically convert them to newsCG programs. As a relatively successful example, an attemptis made to automatically generate a CG talk-show programfrom an Internet forum [5]. Those two above use TVML as avisualizing tool however, Ullrich uses Multimodal PresentationMarkup Languages 3D (MPML3D) [6, 7] that they developedto generate a dialog style animation with two characters byconverting a dialog text into an MPML3D script. MPML3Dhas a similar concept to TVML. MPML3D focuses on how tocontrol an agent’s interaction, and TVML focuses on how tomimic the current TV show format. Piwek et al. proposed amethod for generating dialogues from monological text usingits rhetorical relations [7]. In their proposed system namedT2D (Text2Dialogue), two virtual agents then speak the obtaineddialogue text to make the output animation attractive.2.3Overview of the MethodHere, we describe our approach to automatically generate CGanimation from blog entries.We have already developed the said system for general blog sites,but there are the following problems. We need to prepare a Web scraping method for each blogsite. If the blog owner changes the CMS (Content ManagementSystem) unexpectedly, it will not work anymore.This problem needs to be resolved in order for our system to bepractical. The problem solving is described in the next section.3.2Examining Animation Making Method UsingBlog EntriesThere are three possible ways to solve the consistency problemmentioned in the previous section.(1) To collaborate with the blog system operator to keep theconsistency of automatic visualization.(2) To provide an external plugin capable of converting the blogpost to automatic visualization.(3) To provide a fixed blog system that is designed for automaticvisualization.Purpose of Our DevelopmentMany attempts have been made as described above, but we havebuilt an overall system for visualizing blog articles with CGanimation, and actually deployed this on the Internet. For thatpurpose, we selected WordPress as the blog system, ensured theconsistency of animation conversion (will be discussed in thenext chapter), used TVML for animation, and made it possibleto give visual variation to the production. Then, an evaluationexperiment was conducted on this deployed system to investigateits usefulness.Each of these has its advantages and disadvantages, which arediscussed below.(1) Partnership with the blog operation companyMethod (1) is to collaborate with the operator of the blog systemin some way so that the automatic imaging algorithm is notaffected when the blog system is updated. This is a reliablemethod, and it keeps the automation consistent, but of course,60

Received March 22nd, 2021; Accepted July 5th, 2021Table 1 Web scraping of theme “Twenty-Fifteen”you have to be correctly partnered with the operator company.Also, it is not easy to get them to make changes to their blogsystem in a stable partnership in the future.(2) Plugin functionalityMethod (2) is to allow users to change the HTML/TVMLconversion plugin to adapt to the new blog site. Wheneverthe specification of the HTML structure of the blog changes,someone should create a new conversion plugin so that the usercan replace it. It is not a perfect method, but it is practical as longas the plugin provider is active. This method has the potentialto open up the new world for the general public so that anyonecan create plugins and promote the automatic visualization of notonly blogs but also news and information sites and other sites.But, obviously, if there is no developer or volunteer to update theplugins promptly, the automated application would easily becomeobsolete and not function.TagNoteArticle article Multiple articles, with each articleenclosed in an article tagTitletext blockParagraph h2 divclass “entrycontent” p image a Extract the entire text with the divetag, and then extract the text andimages for each paragraph with thefollowing p-tags, a-tags and imgtags.If the extracted text contains HTMLtags, delete them. It also detectspunctuation and reading in a paragraph and divides the text into appropriate lengths.If it is combined with an img tag,it is an image. Get the URL of thevalue of the href attribute.(3) Utilized blogging systemThe method in (3) is to design a fixed blog system that has thefunctionality of performing the HTML-to-TVML conversion. Inorder to make such a blog system, the system itself needs to befreely modifiable by us. This means it should not be a commercialblog system, however, there are many open-source blog systemsavailable so that those can be used for our purpose.After comparing the above three, we have decided to use themethod (3) that we provide users a CMS capable of CG animationautomatic conversion. This time we have picked up WordPressas the CMS which has the highest market share in the world. Wecreate and supply a special theme of WordPress for CG animationgeneration. Adopting this method, it has the following benefits.1) CG animation auto-generation is always guaranteed.2) It leads to contribute to WordPress community3) Embed special functions to the WordPress, such as, forexample, an animation playback button on a blog entry tofacilitate users.4) The blog system could be used for other purposes, such as,for example, a user interface of CG animation generation.4Figure 2 Screenshot of TGPlayerMethod of Auto-generating CG Animationby WordPressIn this chapter, we describe the details of the automatic videogeneration system with WordPress.4.1In our development, we used an official theme named “TwentyFifteen” provided by the WordPress community. The theme iswritten in PHP, and you can see and modify the source code inthe administration screen. In this study, we read the PHP sourcefor the theme “Twenty Fifteen” and found that certain tags wereused to indicate the title, text body, and images, so we used themas they were and did not modify the PHP source itself. Table 1shows a set of tags for web scraping of “Twenty Fifteen.”WordPress Theme and Web ScrapingIn general, CMS has “themes” that package the appearancedesign and functions of the blog so that users can choose andapply them for their blogs. In WordPress this theme has its sourcecode and specifications open to the general public, and you cancreate and publish your own theme. This means we can create aspecial theme for automatic visualization, then users will be ableto automatically visualize their blogs by selecting this theme forthe targeted blogs.4.2TGPlayerWe have developed an application named “TGPlayer” workingon a Windows PC or an Android device with Unity Game61

Received March 22nd, 2021; Accepted July 5th, 2021Engine. TGPlayer implements the full functions performedby web scraping, TVML script generator, and TVML engine(see Figure 1) described in section 3.1. The web scrapingmodule works in a way described in the previous section andthe TVML script generator generates a TVML script from thetitle, text, and image URLs extracted from the web scraping. Thismodule determines the show format of the TVML program video.Specifically, this module specifies the opening title, studio set,what to use for the CG characters, camera angle, superimposedesign and display location, how to display the images, and soon. And finally the TVML script is played back by the TVMLengine to generate the final TV-like CG animation.Figure 3 Displaying an image in blogWhen the application is launched, it reads the initialization file,accesses the URL of the blog, retrieves the article and shows theCG animation. In addition, a real-time digital clock is displayedat the upper left corner of the screen to give the impression of abroadcast television program. Figure 2 shows a screenshot of theoutput of TGPlayer.5Blog Entry system for TGplayerThis section describes how to deploy and operate the WordPressblog with TGPlayer.5.1(a) A blog post on WordPressDeployment of WordPress BlogWe have installed WordPress version 4.8 on an experimentalrental server. The following two blog sites for English andJapanese are set up.English site: http://niz237gt.sakura.ne.jp/budatv/ (Accessed:4 Nov. 2021)Japanese site: http://niz237gt.sakura.ne.jp/budatv/jp(Accessed: 4 Nov. 2021)(b) Animation made from the blog postFigure 4 A blog post and visualized animationWordPress supports multiple languages, so you can easily switchbetween Japanese and English in the blog settings. By usingthe same WordPress theme for both sites, you can make theconditions exactly the same. As mentioned in Section 4.1, weuse the official theme “Twenty-fifteen”.was inserted, as shown in Figure 3. In that state, the text in theparagraph after the image is read aloud. Then, at the beginningof the next paragraph, the full image shot returns to the studioshot, and the CG character reads the paragraph in front of thecamera. The authors will write the blog manuscript with theabove mechanism in mind. If the sentence in a paragraph is toolong, the system will automatically break it into shorter sentencesusing punctuation and commas.Creating a blog post is the same as the normal WordPressmethod. This time, we have registered multiple users as “Editor”privileges so that multiple blog authors can update their blogposts. The authors with editor privilege can freely post, edit,and change articles, but they cannot change the blog structureitself, such as changing the theme or updating WordPress orthe theme version. These can only be done by a user with“Administrator” privilege. This way the authors can freelyupdate their blogs without affecting the functionality of automaticanimation production.5.25.3Automatic Visualization with TGPlayerThose who watch the blog with CG animation use a PC orAndroid smartphone or tablet. In advance, download and installthe application from the download section of the blog site. Whenyou start TGPlayer, the screen shown in Figure 2 opens. You canswitch between Japanese and English blogs with the send buttonat the bottom. Alternatively, if you register three or more blogs,you can switch between them one by one. Below the playbackscreen, the blog posts registered on the site are listed in orderfrom the latest one. Each button on the list display a thumbnailCreating a Blog PostWhen writing an article in WordPress, first enter the title andthen the body of the article. You can insert the image into thetext if you want. When the blog is visualized, it switches from astudio shot to a full image shot at the position where the image62

Received March 22nd, 2021; Accepted July 5th, 2021Figure 5 Examples of a News Imageimage and the title of the article, which a user can select andclick to start playing back. When the article finishes playing, itautomatically moves to the next article playback and loops.automatic summarization method.2) Image URLs are extracted automatically using HTML tags.3) Manually enter the obtained 200-character summary and theimages into the WordPress blog to make an article. For theEnglish version of the blog, we used a Japanese blog articletranslated by machine translation.In this way, the user can “watch” the blog entry instead ofreading it. Figure 4 shows a blog post on the web browser andthe visualized animation of the post. And you can see variousexamples of playback animations in Figure 5.6We have selected 25 articles from the one-year posts fromSeptember 2019 to put them in the WordPress blog. Thisinput took about an hour. The Japanese text was translatedautomatically, and we did the same process for the English blog.Experiment and EvaluationThis section describes how to evaluate an automated blog viewingsystem using WordPress blog with TGPlayer.6.16.2EvaluationUsefulness of Our System:In the experiment of creating CG news programs generatedfrom the university’s public relations blog, we found that theoperation was smooth, and the automatic visualization withTGPlayer worked without any problems. By using WordPress,automatic CG animation generation is always guaranteed. Wealso noticed that this blog’s automated visualization system couldbe used in reverse as a user interface to generate any requiredCG animations. When the system was demonstrated at multipleinternational conferences, many visitors were impressed by thenovelty of the idea of “watching a blog as a TV program,” andthe great potential was highly evaluated.Experiment SetupIn order to use the content of the blog as close to the realworld as possible for the evaluation of the system, we decidedto experiment with the articles of the blog that are already inoperation. As a target, we used the blog of the Faculty ofMedia Studies, Tokyo University of Technology (TUT blog:http://blog.media.teu.ac.jp/). This blog uses Cocolog (operatedby NIFTY Corporation), not WordPress, so we cannot just applyour system to this blog. Therefore, we moved the articles of TUTblog to the built WordPress blog semi-automatically to conductthe experiment.Evaluation Test and its Results:Using the blog visualization system constructed this time andthe content of the article on the university public relations blogexplained in Section 6.1, an evaluation experiment was conductedby a Web survey. In order to carry out this survey, 5 articleswere selected from the 25 articles mentioned in Section 6.1. Theparticipants were given five blog articles on the Web browser anda 6-minute video of the visualized five articles made by capturingthe TGPlayer. Google Forms with 5-step Likert-scale was usedIn our previous research [8], we have developed a method toshorten sentences of blog articles with different lengths to acertain length used in a TV news program using natural languageprocessing. It automatically generates a summary of a blog articleand keeps it to a certain number of characters. This time, we usedthis method to create the experimental WordPress article by thefollowing steps.1) The target blog posts are compressed to 200 characters by63

Received March 22nd, 2021; Accepted July 5th, 2021Figure 6 Q1. Do you think CG news can be used instead ofreading blogs?Figure 7 Q2. How effective is CG news in understanding thecontent of blog posts?for the survey. In addition, we divided the participants into twogroups according to whether the blog article presentation or theCG video presentation came first, and having the same number ofpeople perform it to minimize the influence caused by the order.There are three survey questions:Q1. Do you think CG news can be used instead of reading blogs?Q2. How effective is CG news in understanding the content ofblog posts?Q3. How appropriate would it be if CG news could replace blog?Also, at the end, a free text box is setup to ask them to entercomments with a text of “Please write down why you chose toanswer and what you noticed.”Figure 8 Q3. How appropriate would it be if CG news couldreplace blog?Fifty-five participants answered the survey. The results of thesubjective evaluation for the three questions are shown in Figures6, 7 and 8. A score of 5 means “very good” and a scoreof 1 means “very bad”. Figure 6 shows the results of thereaction to the difference between reading an article and seeingand hearing it in a video format. As the figure shows, it isdivided into two parts, “it is better to read” and “it is betterto watch the video”, and the shape has less center. Figure 7shows a straightforward distribution with an average score of3.57, showing that participants responded that CG news was alittle bit easier to understand than blog posts. Figure 8 shows theresults of replacing CG news with a blog post, showing the sametrends as Q1. It is divided into good and bad reactions in terms ofthe replacement with CG news.comments on the quality of CG, so it was classified as a differentcategory. The following is a list of typical comments accordingto the above classification.(1) Comments on CG Newsa) Advantage- News is easy to understand because they read it outloud.- Video has an impact on people.- CG news techniques are easier to understand becauseyou can adjust the images’ timing for the viewer to seeas you describe them.b) About time for understanding- CG News felt like a long restraint.- CG News is constrained in the time it takes to listen.- Video takes more time to read the information insteadof getting an accessible overview.c) About CG movie- I’m concerned about text-to-speech errors.- An announcer’s lip-syncing and other animation quality is low.- Difficult to hear with the synthetic voice of CG news.Based on the above results, the degree of completion of CG newsis generally considered to be good based on the result of Q2,but there are disagreements as to whether it is better to read theblog or to see and hear it in the video. This probably indicatesthat there are strong advantages and disadvantages for each.It is also possible that there are differences depending on theindividual nature of the subject and its environment. The aboveconsideration can be known more concretely from the commentsgiven by them. This will be introduced in the next paragraph.(2) Comments on Blog posta) Advantage- A blog post allows to understand the content of thearticle faster than CG news.- Easy to actively gather information- Blogs are better in terms of “seeing what’s interesting”.Comments from participants:The comments obtained were categorized into CG news andblogs. Furthermore, each of them was classified into those thatdescribed its advantages and the time required to understandthe contents. Furthermore, regarding CG news, there were the64

Received March 22nd, 2021; Accepted July 5th, 2021b) About time for understanding- the time required to understand the content was morequickly on the blog- I’m a quicker reader of blogs.- I can read at my own pace.6.3However, there were some opinions in our experiment thatit was easier to read the blog than CG animation. Thissuggests that it should be operated in consideration of theuse case.3. Contributed to the community as a new way to use WordPress.DiscussionFuture issues and prospects are as follows.This sub-section discusses the results, referring to the surveyresult and the free comments shown in Section 6.2.1. Instead of using the theme “Twenty Fifteen” as it is, weshould modify the PHP source code and insert some uniqueidentification tags for more advanced automatic visualization, then create the new theme which is exclusively usedfor automatic visualization.2. We currently use a standalone TGPlayer, however, the CGanimation playback should have been made within the blogweb page for user’s convenience.3. For users who want to create CG animations, we canprovide special WordPress themes prepared in advance forthe use in creating news programs, language educationprograms, debate show programs, etc., and develop them asan animation production tool.Figure 7 of the result of Q2 shows a clean distribution, and themean value of 3.57 is mostly reliable, indicating that CG newsappears to be effective a little above the norm. Thus, the nextquestion is whether this CG news can replace the blogs.This was asked in Q1. And two peaks are observed in the resultshown in Figure 6, indicating that it is not possible to determinewhether the participants thought that it could be replaced ornot. Looking at the comments from participants, there are twoopinions: one is that CG news is easy to understand becausethey read it out loud with necessary images, and the other isthat reading the blog text is easier and convenient to understandthe content. One of the reasons for this result may be that Q1contains two criteria, those are “watching CG news” and “readingblogs”. This might be the problem in formulating Q1 includingthe expression “reading blogs”.References[1] Hayashi, M., “TVML (TV program making language) automatic TV program generation from text-based script -,” inProceedings of Imagina’99, pp. 119–133, 1999.[2] Hayashi, M., Bachelder, S., and Nakajima, M., “Open framework facilitating automatic generation of CG animation from website,” in 2015 International Conference on Cyberworlds (CW),pp. 42–45, 2015.[3] Nadamoto, A. and Tanaka, K., “Complementing your TVviewing by web content automatically-transformed into TVprogram-type content,” in Proceedings of the 13th Annual ACMInternational Conference on Multimedia (MULTIMEDIA ’05),(New York, NY, USA), pp. 41–50, 2005.[4] Douke, M., Hayashi, M., and Makino, E., “Automatic generation of television news shows from given program informationusing TVML,” The Journal of The Institute of Image Informationand Television Engineers, vol. 54, pp. 1097–1103, July 2000 (inJapanese).[5] Hayashi, M., Bachelder, S., and Masayuki, N., “AutomaticCG talk show generation from the internet forum,” in Proceedings of SIGRAD 2016, (Visby, Sweden), pp. 43–45, 2016.[6] Ullrich, S., Prendinger, H., and Ishizuka, M., “MPML3D:Agent authoring language for virtual worlds,” in Proceedingsof the 2008 International Conference on Advances in ComputerEntertainment Technology (ACE ’08), (New York, NY, USA),pp. 134–137, 2008.[7] Piwek, P., Hernault, H., Prendinger, H., and Ishizuka, M.,“T2D: Generating dialogues between virtual agents automaticallyfrom text,” in Intelligent Virtual Agents (IVA ’07), vol. 4722 ofLecture Notes in Computer Science, pp. 161–174, 2007.[8] Hayashi, M., Bachelder, S., Tsuruta, N., Teraoka, T., Sasaki,K., Usami, W., Mikami, K., Kikuchi, T., Takeshima, Y., andKondo, K., “Automatic generation of a TV programme from blogentries,” in Adjunct Proceedings of ACM TVX2018, 2018.However, Q3, which directly asked whether CG news could be asubstitute for blogs, also has two peaks shown in Figure 8. As aresult, we can say that Q1 and Q3 are asking the similar question.In addition, CG news and blogs have their own advantages anddisadvantages and those are complementing each other. Thus, itis not possible to decide which is better than the other.In conclusion, we found that CG news generated from blogs hasthe advantages and disadvantages depending on the person orsituation. This means that by reducing those disadvantages, wewould be able to improve the automatic generation of CG news.7ConclusionWe have proposed and developed a system that allows users toview blog posts like TV news programs. WordPress is used toconstruct this special blog site and a user who wants to view thearticles uses TGPlayer which is an application that we developedworking on a user’s PC or Android device. When blog usersuse this system, a specified blog theme needs to be used forthe visualization. This makes it possible to view blog postsin animation with a CG character spoken by synthesized voicewith subtitles, image file display, playback of music, etc. Thispaper describes the details of this system and the evaluationexperiments conducted on general users. From the above, thefollowing results are obtained.1. A blog system for automatic CG animation conversionwas designed and actually demonstrated by using real blogarticles.2. Usefulness of viewing with CG animation was confirmed.65

task for the media. We have developed a system that automatically converts WordPress blog entries into CG animations. By incorporating the required functionality into a WordPress theme, users can choose this theme and build a blog where readers can watch CG animations instead of reading blog entries. CG animation is created by TVML (TV Program .